Programmatically send keys to input using dispatchEvent

Question

I'm trying to send characters to an input element based on user actions.

I'm trying to use KeyboardEvent with dispatchEvent but whatever I do, it doesn't work

For example:

let keyEvent = new KeyboardEvent();
keyEvent.key = 'a';
keyEvent.keyCode = 'a'.charCodeAt(0);
keyEvent.which = event['keyCode'];
keyEvent.altKey = false;
keyEvent.ctrlKey = true;
keyEvent.shiftKey = false;
keyEvent.metaKey = false;
keyEvent.bubbles = true;

Not sure if this is correct, but I have dispatched it as follows:

  document.querySelector('input').dispatchEvent(keyEvent);
  document.activeElement.dispatchEvent(keyEvent);
  document.dispatchEvent(keyEvent);

DEMO

If I first focus the input before clicking the button nothing really happens. Any suggestions what might go wrong here ?

Microloft · Accepted Answer · 2017-08-02 11:57:35Z

8

Actually, due to security reasons, dispatching a KeyboardEvent to an input element does not generate the action you expect.

The KeyboardEvent document makes it quite clear:

Note: manually firing an event does not generate the default action associated with that event. For example, manually firing a key event does not cause that letter to appear in a focused text input. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.

So the dispatchEvent stuff simply won't work.

Alternatively, consider manipulating the input element directly.

answered Aug 2, 2017 at 11:57

Microloft

4453 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Álvaro Touzón · Accepted Answer · 2017-08-02 11:13:27Z

2

In base of your code here is a eventKeyboard, but: - after dispatch keyevent, wath's next?, who is listener? - ... i cant underdstand at all

document.querySelector('button').addEventListener('mousedown', (e) => {
        e.preventDefault();
      e.stopImmediatePropagation();
        e.stopPropagation();

      console.log('send key');

    /*let keyEvent = new KeyboardEvent();

    keyEvent.key = 'a';
    keyEvent.keyCode = 'a'.charCodeAt(0);
    keyEvent.which = event['keyCode'];
    keyEvent.altKey = false;
    keyEvent.ctrlKey = true;
    keyEvent.shiftKey = false;
    keyEvent.metaKey = false;
    keyEvent.bubbles = true;
    console.log(keyEvent);       */
    var keyEvent = new KeyboardEvent("keydown", {
      bubbles : true,
      cancelable : true,
      char : "A",
      key : "1",
      shiftKey : true,
      keyCode : 81
  });
      document.querySelector('input').dispatchEvent(keyEvent);
      document.activeElement.dispatchEvent(keyEvent);
      document.dispatchEvent(keyEvent);
    console.log(keyEvent);
});

answered Aug 2, 2017 at 11:13

Álvaro Touzón

1,2301 gold badge8 silver badges21 bronze badges

3 Comments

Jeanluca Scaljeri Over a year ago

You're right. my mistake. I simple would like to send keys/chars to an input field. But also keys like arrow-right backspace

Álvaro Touzón Over a year ago

so the input will be subscribed?

Jeanluca Scaljeri Over a year ago

I hoped I could send keys, like backspace to the input element. But as suggested by @Microloft this cannot be done due to security reasons, so I have to manipulate things myself, using the caret position...

Collectives™ on Stack Overflow

Programmatically send keys to input using dispatchEvent

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related