以编程方式模拟空格键然后在文本输入字段上退格

Question

I want to dispatch user actions on a text input field. I want it to be as if an actual person has used their keyboard to click a text input field, hit the spacebar, and then hit the backspace key. With the code I used nothing has happened.

THE JSFIDDLE https://jsfiddle.net/zvrhfq9j/

THE HTML

<input type="text" name="psychTree-savedNodes" style="width:20%" />

THE JS

$('input[name="psychTree-savedNodes"]').focus();
$('input[name="psychTree-savedNodes"]').trigger({type: 'keypress', which: 32, keyCode: 32});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keyup', which: 32, keyCode: 32});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keydown', which: 32, keyCode: 32});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keypress', which: 8, keyCode: 8});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keyup', which: 8, keyCode: 8});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keydown', which: 8, keyCode: 8});

THE SOLUTION: was to actually dispatch the events. Thanks for those that actually answered!

Answer 1

You can simulate user actions, but they won't perform the default functions because it will set isTrusted to false (for security reasons).

For instance, you can build an event to dispatch to a text field that "types the letter 'a'". It will (err, should ) trigger any custom functions bound to that event handler ( el.onkeydown(e){ if( e.key == 'a' ) … ), but it will not type the letter a into the text field, or otherwise process default browser functionality based on that keystroke.

It's a browser implementation, and not something you can get around. So while you can't "type" directly into fields, you can run events based off the event handlers that are attached to those specific events.

I've whipped up a codepen example to show what I mean: https://codepen.io/xhynk/pen/jOPbWzz

• The page loads blue, with 2 fields
• In 1 second, it will run a function that "simulates" a "click > space > backspace" chain of events.
• The events will display what they did inside the "no" input
• The page turns green to show it went off.

If you're so inclined, you can change the event codes to letters to see that the actual keystrokes never appear in the "yes" input . I've added the "no" box that has keydown and onclick event handlers to show what events fired and in what order by changing the value of it.

You can also manually click on the "yes" input, then hit "space" and "backspace" and see they too fire the event handler functions (the event functions will run like they did when they were simulated) but this time they will actually show up in the box (because you actually did them, so they are trusted events).

Long story short, you can't fully simulate "typing" keypress events that are trusted, but you can handle those specific keypress events however you want (even changing the value of the current input if you so choose).

Edit: I see a chain of comments has spawned up at the top. This is a browser function that you can't get around, unless you find (or build) a browser that handles untrusted isTrusted:false events. This doesn't have anything to do with local or sandbox programming environments.