3

I'd like to simulate a keypress into an INPUT object.

I can't just set the element value because of the way the field is processed.

Looks like the solution has to do with dispatchEvent and KeyboardEvent - but there are so many variations and most deprecated.

What's the current modern way of sending printable characters to an INPUT field.

dashman
  • 2,858
  • 3
  • 29
  • 51
  • what is it about "the way the field is processed" which means you can't just use `document.getElementById().value`? – Dan O Apr 13 '20 at 14:52
  • yes - it seems like an Angular web page and it accepts each keypress and does something app specific on the 3rd letter - i.e. it's like those airline flight pages - enter the identifier (SFO) and then it displays the full city name automatically (like a combo-box)...but it's an INPUT element. – dashman Apr 13 '20 at 16:29
  • Take a look at [this answer](https://stackoverflow.com/a/44190874/3577695) – aljgom Jun 29 '22 at 21:49

2 Answers2

2

For modern web development dom editing use the following:

const inputElement = document.querySelector("input");
inputElement.value = 'newValue';
inputElement.dispatchEvent(
  new Event("input", { bubbles: true, cancelable: true })
);

With modern websites we now need to notify event handlers that the field has been changed, for all/any state management to recognise change. Previously without dispatching event you are just modifying the value field through the DOM.

Shimsho
  • 107
  • 9
  • Thanks ! Just to mention for anyone stopping by with similar issue: This way was the only way I was able to fill-in the value on input fields of a Vue App. Of course, could be only a particularity in my specific case and of this specific Vue app – Svenv Jun 07 '23 at 09:39
0

If you want to simulate a keypress event you will have to do:

var evt = new KeyboardEvent('keypress', { key: "a" });

input.dispatchEvent(evt);

As you said, the keypress event is being deprecated and it is not guaranteed to work in the future. It is recommended to use beforeinput or keydown instead.

Even so, the support for keypress is still good, as you can see in here.

mgarcia
  • 5,669
  • 3
  • 16
  • 35
  • Just tried that from the Firefox web console and it didn't take – dashman Apr 13 '20 at 16:35
  • It works for me. Maybe you are doing something different? I built [this jsfiddle](https://jsfiddle.net/59zs1jeh/) so you can check it works. – mgarcia Apr 13 '20 at 16:43
  • I don't think I explained my problem clearly. I'm trying to simulate input into the INPUT field. e.g. I'd like to add S-F-O to the input field. I can't assign element.value - see my comment above - doesn't work. – dashman Apr 13 '20 at 17:44
  • In the event listener for the input element, i can do `this.value += ev.key` and it saves it - but it's not triggering the processing event that happens when I input the keys using a keyboard. – dashman Apr 13 '20 at 19:52
  • Tried out at new version of Firefox, still doesn't work... – NNL993 May 23 '22 at 06:20
  • @dashman, did you figure this out? I'm having the same issue on an input field. I can change the inlut value but as soon as I click or sometimes even hover the input field it returns to its previous value. – turrican_34 Jul 07 '22 at 15:40
  • no i didn't. these Angular and React web-pages are a scourge to standard web 2.0 development. The UIs look standard but interaction is very nonstandard and opaque - i'm sure by design. – dashman Jul 07 '22 at 20:19
  • This has no effect... – Cerin Nov 15 '22 at 01:29
  • 2
    @dashman Thanks to the blessing of chatgpt I managed to dig to a solution for modern framework based websites. Update the value of the input using `inputElement.value = 'new value'` and add afterwards `inputElement.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));`. This second line notifies event handlers that the input has been updated. – Shimsho Apr 12 '23 at 16:00
  • I tried this in Firefox, development inspection console and it doesn't work. On the same United flightstatus page, I can enter the flight number but when I press the SEARCH button - it doesn't take. https://www.united.com/en/us – dashman Apr 19 '23 at 00:49