Start a keyboard event flow - javascript

Is there a way to programmatically (using JS) start a keyboard event flow on an input[type=text] or textarea?
I mean that I want to make the element write a character as if the user has used the keyboard to do it. Meaning, it will consider the caret position, text selection, overwrite\insert state, CAPS-LOCK state, and so on.
Existing solutions (and questions) I've found don't give me that result, but just trigger a keydown or some other keyboard event on that element. I want to do something like:
document.getElementById('input').pressKey('e');
The solution has to be cross-browser (Firefox, Chrome and IE8+), and should not contain external plugins such as Adobe Flash - only things that can be sent with a web page.

Related

Is there a way to trigger the 'magic caret' feature on ios (web)

I've created a js virtual keyboard that is able to update the value of a textarea. On mobile, you can trigger the 'magic floating caret' by holding down on a textarea or holding any key on the native keyboard. Because my textarea input mode is set to none in order to hide the native keyboard and show my own, I'd like to know if there is a way to trigger that second effect using my own keyboard?
My understanding is that I can trigger an event using execCommand or jQuery's trigger function, but neither are able to do what I'd like.
Thanks for input!
magic cursor article link news18

Simulate holding down key in order to gauge system repeat rate in JavaScript

I have a pointless (read: makes the girlfriend happy) webpage that, every half second, spawns a unicorn image which hops across the screen. You can also spawn them by pressing u. I discovered after writing this script that the onkeydown event will repeat when held down--the onkeyup event does not, which was why I was surprised. This "feature" was endearing to me, so now I want to replicate it for mobile browsers.
The goal is to create a <div> at the bottom of the screen, that when held down, spawns unicorns. Obviously I could (and probably will) just use setInterval() with a static 33ms delay to mimic Windows's default/max keyboard repeat speed, but where's the fun in that?
But out of curiosity, I'm wondering if there's a way to mimic holding down a key, triggering the keypress or keydown events as the keyboard would for whatever device is running the page, so I can mimic holding down the key as exactly as possible while the user "holds down" the div.
I'm fine with using jQuery or any other framework like that.
Simulating the auto-repeat feature is not possible in javascript without manually coding the setInterval. That happens at the operating system level.
Simulating a single keyboard event is possible. You're looking for element.dispatchEvent(evt);
//create your fake event
var myFakeEvent = new KeyboardEvent('keydown', []);
//send the event from the element
document.body.dispatchEvent(myFakeEvent);
Obviously, you want to call dispatchEvent() from whatever element the onkeydown is listening to.
More detailed reading:
EventTarget.dispatchEvent
KeyboardEvent constructor

Indesign script (javascript) on key press

This is a fairly straight forwards question, but I cannot find the answer in the documentation.
I know it is possible to detect clicks, but is it possible to detect a key press using an InDesign script?
For example, if the user creates a text box, and types 'a' into it, I would like to capture that and do something with it.
Perhaps this can be done using hotkeys, where for example one script on startup adds a hotkey for each keyboard button, each hot key fires a script for handling it. This seems a bit of a hack (if it would even work). Is there not a on key press listener I can add?
Any help is much appreciated.
I have found this so far in the documentation:
Most of the things scripting cannot do—like setting up a workspace or
defining a set of keyboard shortcuts—are things that have to do with
the user interface.
For the specific example you give (typing something into a text frame), you can use the afterSelectionChanged event listener (whose parent can be the application, or a layout window, amongst others).

How can I isolate text inputs/textareas/contenteditable divs from one another for purposes of 'undo' in Chrome?

Unfortunately, I know that the proposed undomanager standard is a long way off. Is there an existing technique or library for isolating individual elements that can receive text input, so that each will maintain its own undo/redo stack in Chrome?
For example, if I have a comment box and a search box on a page, repeatedly hitting ctrl+z (or 'undo' in the context menu) will undo typing in both inputs. I'd like to emulate Firefox's functionality and keep undo/redo for these inputs separate.

Javascript context menu click event/detection - filter paste content

Scenario: I'm trying to intercept paste events inside a textarea/input text, and filter the content being pasted.
Webkit/IE are handled rather well, as I can attach code to the onpaste event, and then read from the clipboard what is being pasted. Plenty of examples around.
Gecko is trickier, because as far as I know it isn't possible to read the clipboard content on Firefox (unless somebody knows a workaround for that?)
I just use the input swap trick for that.
Opera is being annoying tho. I can trap CTRL+V and SHIFT+INS, but there's no onpaste event.
Not to mention any sort of clipboard interaction, apparently.
So, my question is:
Can I detect if the user clicked on paste in the context menu on Opera? Is there any other way to detect the event?
EDIT:
Thanks everybody for the answers - they all add a good input, even if there's no definitive solution.
Having to choose, I'll pick the only one that tried to address the original question, and that would probably work if it wasn't too much of an hack to even try.
Notes for those that have my same problem (input filtering):
it is possible to capture content being dragged: mouseup + setTimeout does the trick everywhere almost perfectly.
without flash, there is probably no solution bar polling. Even with flash, it's not a completely solid solution either. Too much effort to support 100% of the cases.
I ran into this last year. In short, no.
I ended up using an onchange handler and filtering the content after it's already been pasted into the text box.
You can intercept the paste with jQuery using the bind('paste', function() {});, compare string before and after pasting and apply your formatting.
The following was tested in IE7/FF3.6/Chrome/Safari 5
$("#textarea").bind('paste', function(e){
// Do whatever you needed to do with the code here.
});
Live Example http://jsfiddle.net/VSrTg/2/
Edit An approach would be something like this:
$("#textarea").bind('paste', function(e){
var oldText = this.value;
setTimeout(function() {
// Compare oldText to $("#textarea").val() and format accordingly.
}, 1000);
});
​Edit 2 Given your revisions to your original post, if you're worried about the giant market share that is Opera, you're going to have to monitor the value of your textbox with a setInterval() and compare it against itself for changes.
Ultimately there will always be a way around your script, even the above example is susceptible to simply dragging text from another text box (or the address bar) into it without triggering the paste event defined above.
I would like to point out DOJO menu widget that is creating context menus perfectly in different browsers. http://www.dojotoolkit.org/reference-guide/dijit/Menu.html#dijit-menu
What you can do is that detect paste event in browsers that are supporting it and override context menu in browsers that are not supporting this event like opera.
Once you create your own context menu then you can add copy paste menu item or create context menu similar to the default using css.
Edited
Some browsers might not allow us to fetch clipboard content, in this case we can always revert back to flash for borrowing some of its features that are cross browser. See couple of links I posted in comments.
Its complete implementation might have more issues than anticipated but it is possible and we can always give it a try (I will for sure).
The answer to the question is a simple no. The main browsers that have no paste event are recent versions of Opera and Firefox 2. Given that there is no paste event, you need to find an alternative event or set of events to detect a paste from the context menu as it actually happens. You can add handlers for every event there is (I've done this) and you simply get nothing in the relevant browsers when a paste is triggered from the context menu by the user.
This only leaves polling the text input's value regularly, which is not the same thing. You could keep track of keypresses and observe in your polling code that the text input's value has changed by some means other than keyboard input and do a diff, but that's hacky and unreliable.
I use the setTimeout for paste events. But for context menu select nothing seems to work(as stated above). I bind a mousemove to the input's form which fires the update function. Then unbind/bind so they don't stack up.
This handles the context menu select and dragging value to input field.
If your form is small, say with only one input field and the mouse will not land on it after selecting from context menu, bind to the form's parent or document. Sure, it has to wait until the mouse moves but that is the general user action after selecting from context menu.
Works fine.

Categories