What I have
I have a simple view in my .cshtml file which uses the form
//actionName //controller //method //htmlAttributes
#using (Html.BeginForm("TableName", "Data", FormMethod.Post, new { id = "frmName" }))
{
//combobox with id
//button with id
}
I was able to implement triggering the button with Enter key by using answers from this thread as a basis.
$('#frmName').on('keypress', function (e) {
sender = event || window.event;
var hasfocus = $('#btnGo').is(':focus') || false;
if (sender.keyCode == 13 && !hasfocus) {
e.preventDefault();
$('#btnGo').trigger('click');
}
});
In above scenario, everything works as intended.
What I need
I recently found that this particular view will not be using the form. As a result, I wanted to adapt my javascript code to separate it from the frmName. However, it proved to be trickier than I anticipated.
What I tried
I tried replacing the formID with the button ID
$('#btnGo').on('keypress', function (e) {
sender = event || window.event;
var hasfocus = $('#btnGo').is(':focus') || false;
if (sender.keyCode == 13 && !hasfocus) {
e.preventDefault();
$('#btnGo').trigger('click');
}
});
I tried implementing something similar to accepted answer of the thread mentioned above.
document.getElementById("cbID")
.addEventListener("keyup", function (event) {
event.preventDefault();
if (event.keyCode == 13 || $('#btnGo').is(':focus')) {
document.getElementById("btnGo").click();
}
});
In both cases, when I select a value from the combobox and press enter key, an unexpected error pops up
Can you please point me in the right direction how I can attach Enter to button while separating it from my FormID? (Preferably, without altering my initial javascript code too much, but I'm flexible to suggestions)
Edit
After testing in different browsers(IE, Chrome, FF) for debugging purposes, I got the following results:
Initial scenario works as intended in all 3 browsers
My attempts inside Chrome leads to an error inside the browser instead of intended error checker
My attempts inside FF leads so asking for my credentials, which I am hesitant to give
Honestly, I am more interested now in why pressing Enter leads me to some kind of file saving and options provided in my picture. The question itself is still relevant though.
Short story:
// get the editor instance
var editor = CKEDITOR.instances.editor1;
// this is what I want, but it does not exist
editor.execCommand('delete');
// I've played with this, found somewhere, but without success.
editor.fire('key', { keyCode : 46 } )
Long story:
there is a problem when using the CKEditor within the Webbrowser control from .NET WindowsForms. Several keys, including the DELete key are not propagated to the control at all.
I managed to intercept the key using a global keyboard hook and sent window messages direct to the embedded IE window handle, but without success.
Now my goal is to simulate the delete key from within the javascript, because I can call a js function from my .NET app.
Somehow this must work, because it works within the virtual keyboard plugin.
(see sample)
Sadly I wasn't able to get how this works from the plugin code.
I would be glad if anybody can post a working sample.
Thanks!
I found a library used in javascript virtual keyboard (Jsvk plugin).
It is called DocumentSelection and can be found here.
<script src="./documentselection.js"></script>
function simulateDelete()
{
var editor = CKEDITOR.instances.editor1;
var container = (editor.container.getElementsByTag('textarea').getItem(0) ||
editor.container.getElementsByTag('iframe').getItem(0)
).$;
DocumentSelection.deleteAtCursor(container, true);
}
Maybe someone has an easier solution without the need of an external libaray.
I think u want some clues...
There it is...Check the Documentation
Key Event in CKEditor
alert( event.getKey() );
to get the key Element and also the other one is
alert( event.getKeystroke() == 65 );// "a" key
alert( event.getKeystroke() == CKEDITOR.CTRL + 65 );// CTRL + "a" key
alert( event.getKeystroke() == CKEDITOR.CTRL + CKEDITOR.SHIFT + 65 );//CTRL + SHIFT + "a" key
Like in the image, the Facebook comment box has no submit button, when you write something and press Enter button, the comment posted.
I want to submit the comment via JavaScript that running in console, but I tried to trigger Enter event, submit event of the DOM. Could not make it work.
The current comment boxes aren't a traditional <textarea> inside of a <form>. They're using the contenteditable attribute on a div. In order to submit in this scenario, you'd want to listen to one of the keyboard events (keydown, keypress, keyup) and look for the Enter key which is keycode 13.
Looks like FB is listening to the keydown evt in this case, so when I ran this code I was able to fake submit a comment:
function fireEvent(type, element) {
var evt;
if(document.createEvent) {
evt = document.createEvent("HTMLEvents");
evt.initEvent(type, true, true);
} else {
evt = document.createEventObject();
evt.eventType = type;
}
evt.eventName = type;
evt.keyCode = 13;
evt.which = 13;
if(document.createEvent) {
element.dispatchEvent(evt);
} else {
element.fireEvent("on" + evt.eventType, evt);
}
}
fireEvent('keydown', document.querySelector('[role="combobox"]._54-z span span'));
A couple of things to note about this. The class ._54-z was a class they just happened to use on my page. Your mileage may vary. Use dev tools to make sure you grab the right element (it should have the aria role "combobox"). Also, if you're looking to support older browsers, you're going to have to tweak the fireEvent function code above. I only tested the above example in the latest Chrome.
Finally, to complicate matters on your end, Facebook is using React which creates a virtual DOM representation of the current page. If you're manually typing in the characters into the combobox and then run the code above, it'll work as expected. But you will not be able to set the combobox's innermost <span>'s innerHTML to what you're looking to do and then trigger keydown. You'll likely need to trigger the change event on the combobox to ensure your message persists to the Virtual DOM.
That should get you started! Hope that helps!
Some years after, this post remains relevant and is actually the only one I found regarding this, whilst I was toying around trying to post to FB groups through JS code (a task similar to the original question).
At long last I cracked it - tested and works:
setTimeout(() => {
document.querySelector('[placeholder^="Write something"]').click();
setTimeout(() => {
let postText = "I'm a Facebook post from Javascript!";
let dataDiv = document.querySelector('[contenteditable] [data-offset-key]');
let dataKey = dataDiv.attributes["data-offset-key"].value;
//Better to construct the span structure exactly in the form FB does it
let spanHTML = `<span data-offset-key="${dataKey}"><span data-text="true">${postText}</span></span>`;
dataDiv.innerHTML = spanHTML;
let eventType = "input";
//This can probably be optimized, no need to fire events for so many elements
let div = document.querySelectorAll('div[role=presentation]')[1].parentElement.parentElement;
let collection = div.getElementsByTagName("*");
[...collection].forEach(elem => {
let evt = document.createEvent("HTMLEvents");
evt.initEvent(eventType, true, true); //second "true" is for bubbling - might be important
elem.dispatchEvent(evt);
});
//Clicking the post button
setTimeout(()=>{
document.querySelector('.rfloat button[type=submit][value="1"]').click();
},2000);
}, 4000);
}, 7000);
So here's the story, as I've learned from previous comments in this post and from digging into FB's code. FB uses React, thus changes to the DOM would not "catch on" as React uses virtual DOM. If you were to click "Post" after changing the DOM from JS, the text would not be posted. That's why you'd have to fire the events manually as was suggested here.
However - firing the right event for the right element is tricky business and has almost prevented me from succeeding. After some long hours I found that this code works, probably because it targets multiple elements, starting from a parent element of the group post, and drilling down to all child elements and firing the event for each one of them (this is the [...collection].forEach(elem => { bit). As written this can be obviously be optimized to find the one right element that needs to fire the event.
As for which event to fire, as was discussed here, I've experimented with several, and found "input" to be the one. Also, the code started working after I changed the second argument of initEvent to true - i.e. evt.initEvent(eventType, true, true). Not sure if this made a difference but I've had enough hours fiddling with this, if it works, that enough for me. BTW the setTimeouts can be played around with, of course.
(Unsuccessfully) Digging into FB's React Data Structure
Another note about a different path I tried to go and ended up being fruitless: using React Dev Tools Chrome extension, you're able to access the components themselves and all their props and states using $r. Surprisingly, this also works outside of the console, so using something like TamperMonkey to run JS code also works. I actually found where FB keeps the post text in the state. For reference, it's in a component called ComposerStatusAttachmentMentionsInputContainer that's in charge of the editor part of the post, and below is the code to access it.
$r actually provides access to a lot of React stuff, like setState. Theoritically I believed I could use that to set the state of the post text in React (if you know React, you'd agree that setState would be the right way to trigger a change that would stick).
However, after some long hours I found that this is VERY hard to do, since FB uses a framework on top of React called Draft.js, which handles all posts. This framework has it's own methods, classes, data structures and what not, and it's very hard to operate on those from "outside" without the source code.
I also tried manually firing the onchange functions attached to the components, which didn't work because I didn't have the right parameters, which are objects in the likes of editorContent and selectionContent from Draft.Js, which need to be carefully constructed using methods like Modifier from Draft.js that I didn't have access to (how the hell do you externally access a static method from a library entangled in the source code?? I didn't manage to).
Anyway, the code for accessing the state variable where the text is stored, provided you have React dev tools and you've highlighted ComposerStatusAttachmentMentionsInputContainer:
let blockMap = $r["state"].activeEditorState["$1"].currentContent.blockMap;
let innerObj = JSON.parse(JSON.stringify(blockMap)); //this is needed to get the next property as it's not static or something
let id = Object.keys(innerObj)[0]; //get the id from the obj property
console.log(innerObj[id].text); //this is it!
But as I wrote, this is pretty much useless :-)
as I wasn't able to post comments through the "normal" facebook page, I remembered that they also have the mobile version, which is on m.facebook. com, there, they still have the submit Button, so depending on your needs, this may be a good option
so, you could go to the mobile facebook post (eg https://m.facebook.com/${author}/posts/${postId}) and do
// Find the input element that saves the message to be posted
document.querySelector("input[name='comment_text']").value='MESSAGE TO POST';
// find the submit button, enable it and click it
const submitButton = document.querySelector("button[name='submit']");
submitButton.disabled = false;
submitButton.click();
Here is a working solution after 3 weeks of experimenting (using #Benjamin Solum's fireEvent function):
this version posts a comment only for the first post on the page (by using querySelector method)
this version can be used only on your personal wall (unless you change the query selectors)
function fireEvent(type, element, keyCode) {
var evt;
if(document.createEvent) {
evt = document.createEvent("HTMLEvents");
evt.initEvent(type, true, true);
} else {
evt = document.createEventObject();
evt.eventType = type;
}
evt.eventName = type;
if (keyCode !== undefined){
evt.keyCode = keyCode;
evt.which = keyCode;
}
if(document.createEvent) {
element.dispatchEvent(evt);
} else {
element.fireEvent("on" + evt.eventType, evt);
}
}
// clicking the comment link - it reveals the combobox
document.querySelector(".fbTimelineSection .comment_link").click();
setTimeout(function(){
var combobox = document.querySelector(".fbTimelineSection [role='combobox']");
var spanWrapper = document.querySelector(".fbTimelineSection [role='combobox'] span");
// add text to the combobox
spanWrapper.innerHTML = "<span data-text='true'>Thank you!</span>";
var spanElement = document.querySelector(".fbTimelineSection [role='combobox'] span span");
fireEvent("blur", combobox);
fireEvent("focus", combobox);
fireEvent("input", combobox);
fireEvent("keydown", spanElement, 13); // pushing enter
},2000);
function fireEvent(type, element) {
var evt;
if(document.createEvent) {
evt = document.createEvent("HTMLEvents");
evt.initEvent(type, true, true);
} else {
evt = document.createEventObject();
evt.eventType = type;
}
evt.eventName = type;
evt.keyCode = 13;
evt.which = 13;
if(document.createEvent) {
element.dispatchEvent(evt);
} else {
element.fireEvent("on" + evt.eventType, evt);
}
}
fireEvent('keydown', document.
to solve your question may you see this link, there is a example how to "Auto comment on a facebook post using JavaScript"
"Below are the steps:
Go to facebook page using m.facebook.com
Sign in and open any post.
Open developer mode in Chrome by pressing Ctrl+Shift+I
Navigate to the console.
Now, run the below script."
var count = 100;
var message = "Hi";
var loop = setInterval(function(){
var input = document.getElementsByName("comment_text")[0];
var submit = document.querySelector('button[type="submit"]');
submit.disabled = false;
input.value = message;
submit.click();
count -= 1;
if(count == 0)
{
clearInterval(loop);
}
}, 10000);
Kind regards
ref.: source page
Is there a way to capture a key press event with dojo/aspect and aspect.after?
I am using a third party Javascript API (ESRI JS API v3.4) that provides a widget for drawing graphics on a map. The draw toolbar widget has an onDrawEnd event that provides the shape of the drawn graphic object as a parameter. I need to determine if the user was pressing the CTRL or SHIFT key while drawing on the map with this widget, but I use aspect.after(drawingToolbar, "onDrawEnd", myhandlerfunction, true) to connect the drawing event.
The only way I know how to determine if a key is pressed is by using an event object, which is not provided when using aspect like it is with dojo/on.
Any ideas how I can determine if a key is pressed here?
Maybe u musst go another way to catch up a Key-Event.
This is how i catch the "Enter"-Event in a Textbox. When the Enter-Key is hit, the function zoomToAnlage() is called. It's important that this event listener is already loaded in the ini-phase.
Sure, this is not a total resolve for your Question, but maybe it shows a way how you can handle it.
function initKielAnlagenNummernSuchen(){
queryTaskAnlagenNummern = new esri.tasks.QueryTask(restServicesLocation + NameSearchService + "/MapServer/23");
queryallAnlagenNummern = new esri.tasks.Query();
queryallAnlagenNummern.returnGeometry = true;
queryallAnlagenNummern.outFields = ["ANLAGE"];
require(["dojo/keys","dojo/dom","dojo/on"], function(keys, dom, on){
on(dom.byId("selectAnlagenNummer"), "keypress", function(evt){
var charOrCode = evt.charCode || evt.keyCode;
if (charOrCode == keys.ENTER) {
zoomToAnlage();
}
});
});
}
Here's a Link to dojo/keys : http://dojotoolkit.org/reference-guide/1.8/dojo/keys.html?highlight=keys#id2
Regards, Miriam
dojo.aspect can't connect to events, only functions. However you should be able to aspect to a function that is handling that event, and steal its args.
aspect.after(drawingToolbar, "someHandlerFunctionWithTheEventArg",
function(args){
// access the event from the args here
}, true);
I want to detect and block certain keyboard shortcuts on a web page. For example, say I want to prevent alt+tab for switching apps (just an example, assume any global shortcut).
Here's as far as I can think it out:
attach a keyboard event listener to
document (or window?)
use event.which to check which key
combination was pressed
if it was a blacklisted shortcut,
stop the browser from executing it
But, I don't know how to
A) detect multiple keys (e.g. alt and tab together), or
B) stop them from executing (can I just return false?).
Can anyone tell me how to accomplish the above?
You want to prevent screenshots from being taken? Forget it right now.
No matter what elaborate mechanisms you put into place, they will be trivial to circumvent by un-focusing the browser window (or just the document, e.g. by clicking into the address bar), and pressing the screenshot key then.
There is no chance for you to do this except by installing client software on the computer that controls what the user does, or maybe using some proprietary ActiveX control that makes its contents un-print-screenable. Both approaches are hugely difficult and have tons of downsides.
You cannot block keyboard combinations that belong to the OS. Only keyboard combinations that roam inside the browser and are not OS specific.
If you want to protect your content, don't publish it in public. Or put a decent license on it
// lookup table for keycodes
var key = { s: 83 };
document.onkeydown = function (e) {
// normalize event
e = e || window.event;
// detecting multiple keys, e.g: Ctrl + S
if (e.ctrlKey && !e.altKey && e.keyCode === key.s) {
// prevent default action
if (e.preventDefault) {
e.preventDefault();
}
// IE
e.returnValue = false;
}
};
Detecting Keystrokes Compatibility Table (QuirksMode)