I am sending programmatically generated keyboard events to the document. I was hoping that the currently focused input element would display them, however it doesn't. The events are generated from a string with this function:

const simulateKeyPress = keys => {
  keys.split('').forEach(theKey => {
    const e = new window.KeyboardEvent('keypress', {
      bubbles: true,
      key: theKey,
      keyCode: theKey.charCodeAt(0),
      charCode: theKey.charCodeAt(0),
    })
    document.dispatchEvent(e)
  })
}

If I add an EventListener to the document it'll receive all the events. Their isTrusted flag is set to false however, might this be the issue?

I am sending programmatically generated keyboard events to the document. I was hoping that the currently focused input element would display them, however it doesn't. The events are generated from a string with this function:

const simulateKeyPress = keys => {
  keys.split('').forEach(theKey => {
    const e = new window.KeyboardEvent('keypress', {
      bubbles: true,
      key: theKey,
      keyCode: theKey.charCodeAt(0),
      charCode: theKey.charCodeAt(0),
    })
    document.dispatchEvent(e)
  })
}

If I add an EventListener to the document it'll receive all the events. Their isTrusted flag is set to false however, might this be the issue?

• javascript
• input
• keyboard-events

Share Improve this question Follow asked Jul 31, 2017 at 9:51 Philip FeldmannPhilip Feldmann 8,43577 gold badges4444 silver badges6666 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

It cannot be done from website programmatically. Like you said isTrusted boolean as false will not trigger the keypress correctly (since Chrome 53): https://developer.mozilla/en/docs/Web/API/Event/isTrusted

I tried to solve this in here: https://codepen.io/zvona/pen/LjNEyr?editors=1010

where practically only difference is to dispatch the event for activeElement, like: document.activeElement.dispatchEvent(e);. In addition, if you're able to hook on input's events, you can add event listener to do the job:

input.addEventListener('keypress', (evt) => {
  evt.target.value += evt.key;
});

But like mentioned, it's not trusted event. However, this can be done via browser extensions (see: How to to initialize keyboard event with given char/keycode in a Chrome extension?)