1

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!

Chiemi Sayuri
  • 31
  • 5
  • nope; and this is for security reasons. – Mister Jojo Feb 11 '20 at 23:36
  • so there's no way to simulate user actions on a keyboard? – Chiemi Sayuri Feb 11 '20 at 23:44
  • 1
    https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically#19883789 – Mister Jojo Feb 11 '20 at 23:53
  • or you can do something like that https://css-tricks.com/snippets/css/typewriter-effect/ – Mister Jojo Feb 11 '20 at 23:56
  • @Mister Jojo the stackoverflow link does not work. nothing happened. I don't really care about security reasons as I'll be the only one accessing this on my own laptop so I don't need a sandboxed environment. Would I be able to modify my code to dispatch events instead? – Chiemi Sayuri Feb 11 '20 at 23:58
  • ? you mean the W3C should make an exception for you? – Mister Jojo Feb 12 '20 at 00:02
  • @Mister Jojo I mean this is personal code that will never be released publicly or ever online. No one is using it but me. Anyways no need for any responses someone helpful messaged me my answer. – Chiemi Sayuri Feb 12 '20 at 00:06
  • it will not change anything your browser is not programmed to make this distinction! – Mister Jojo Feb 12 '20 at 00:10
  • It changed my code to working. I don't think you understood my question as nowhere did I want the browser to make the distinction. I just wanted it to be automatically done. I really don't know what you thought I was asking for. Especially when the stackoverflow you linked me was completely wrong for my question. – Chiemi Sayuri Feb 12 '20 at 00:13
  • it does not matter, I do not blame you, and you may end up one day by understanding my explanations – Mister Jojo Feb 12 '20 at 00:27

1 Answers1

3

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.

Xhynk
  • 13,513
  • 8
  • 32
  • 69
  • It worked for me and I used the same browser as before. Apparently it was the order it needed to be focus, keyup, keypress, keydown, and blur – Chiemi Sayuri Feb 12 '20 at 00:23