Howto trigger input event programmatically on input text field?

Question

As you can see in the code section below, once you click on one the buttons the text in the field changes but the event does not get fired (and it does not run alertTextInput() method), when you type text directly under the text field the event is triggered as expected.

How can I activate the event manually by using a code or using a method that changes the text and triggers the event? thank you!

const changeTextButton = document.querySelector("#change-text");
const clearButton = document.querySelector("#clear");
const inputField = document.querySelector("#query");

changeTextButton.addEventListener("click", changeText);
clearButton.addEventListener("click", clear);
inputField.addEventListener("input", alertTextInput);

function changeText() {
  inputField.value = "Demo Text!!";
  inputField.dispatchEvent(new Event("input"))
}

function clear() {
  inputField.value = "";
  inputField.dispatchEvent(new Event("input"))
}

function alertTextInput() {
  alert(inputField.value);
}

<input type=text id="query">
<button id="change-text">Change the text programmatically</button>
<button id="clear">Clear</button>

what text you wanna change ? i am having a hard time understunding your question — Abslen Char, Mar 19 '18 at 17:54
I'm assuming you're asking how to get the `alertTextInput()` to run after you change the text through `inputField.value = "Demo Text!!";` - unfortunately that isn't considered an event for the input event listener. You'd have to call that manually I believe. — adprocas, Mar 19 '18 at 17:55
possible duplicate: https://stackoverflow.com/questions/16013024/detect-programmatic-changes-on-input-type-text — Sebastian Speitel, Mar 19 '18 at 17:57
This is another duplicate - https://stackoverflow.com/questions/42427606/event-when-input-value-is-changed-by-javascript — adprocas, Mar 19 '18 at 17:58
You are welcome to see the answer below, from my impression The question is not duplicated from the links attached above. — Sagi Nadav, Mar 19 '18 at 18:22

score 36 · Accepted Answer · answered Mar 19 '18 at 17:57

36

Try this to manually dispatch the event, see EventTarget.dispatchEvent():

inputField.dispatchEvent(new Event("input"))

answered Mar 19 '18 at 17:57

viz

1,247
16
27

score 12 · Answer 2 · answered May 29 '18 at 17:14

From React Doc

React expects to hear the input event

So trigger the input event after set the value. This is how to trigger.

The Final code is:

var event = new Event('input', {
    'bubbles': true,
    'cancelable': true
});

inputElement.value = '0.2'
inputElement.dispatchEvent(event);

score 1 · Answer 3 · answered Mar 19 '18 at 18:03

1

If I understand correctly you want the input text to change AND the alert to appear when clicking "change" button. As the changeText() function just changes the text you should not expect an alert to appear.

You could just add the alertTextInput() function to the bottom of changeText().

function changeText() {
  inputField.value = "Demo Text!!";
  alertTextInput();
}

answered Mar 19 '18 at 18:03

P. Drozd

92
5

I prefer an event-based solution – Sagi Nadav Mar 19 '18 at 18:05
I had a similar situation as the OP and found this answer was useful for me. I tried the dispatchEvent("input) paired with addEventListener("input", myfunc) but it did not work for some reason. I like your simple solution. So thanks. – calabash Mar 20 '22 at 01:33

Howto trigger input event programmatically on input text field?

3 Answers3