Simulating keypress into an INPUT field (Javascript)

Question

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.

Hepatitis

what is it about "the way the field is processed" which means you can't just use document.getElementById().value? – Antirrhinum

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. – Hepatitis

Take a look at this answer – Dovekie

Answer 1

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.

Unceasing

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 – Obolus

you have no idea you ended my 6 month problem. it works for linkedin automation! – Haematocele

Answer 2

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.

Albers

Just tried that from the Firefox web console and it didn't take – Hepatitis

It works for me. Maybe you are doing something different? I built this jsfiddle so you can check it works. – Albers

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. – Hepatitis

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. – Hepatitis

Tried out at new version of Firefox, still doesn't work... – October

@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. – Fabulous

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. – Hepatitis

This has no effect... – Trapshooting

@Hepatitis 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. – Unceasing

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. united.com/en/us – Hepatitis

Thanks a lot @Shimsho, I was finally able to get it working with your answer :) – Treadle