DEV Community

Rob
Rob

Posted on

Update <input> input value via synthetic `Event`

Given any <input type="text" /> element, is it possible to trigger the value to change using only synthetic event objects and calling dispatchEvent directly on the input element?

For example, using only vanilla JS, the following results in nothing changing:

const event = new KeyboardEvent('keydown', {
  key: 'e',
  code: 'KeyE',
  keyCode: 69,
});

// doesn't work, nothing changes
document.getElementById('my-input').dispatchEvent(event);
Enter fullscreen mode Exit fullscreen mode

UPDATE:
Even if we capture a native KeyboardEvent and store a reference to it, passing it into dispatchEvent still causes no change to the value.

Top comments (0)