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
– Abslen Char, Commented Mar 19, 2018 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
– adprocas, Commented Mar 19, 2018 at 17:55
possible duplicate: stackoverflow.com/questions/16013024/… — Sebastian Speitel
– Sebastian Speitel, Commented Mar 19, 2018 at 17:57
This is another duplicate - stackoverflow.com/questions/42427606/… — adprocas
– adprocas, Commented Mar 19, 2018 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
– Sagi Nadav, Commented Mar 19, 2018 at 18:22

viz · Accepted Answer · 2018-03-19 17:57:45Z

41

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

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

answered Mar 19, 2018 at 17:57

viz

1,29718 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas Williams Over a year ago

This however won't set the inputType property correctly (when checking event.inputType), see this for reference: Mozilla.org and W3C

hzwzw · Accepted Answer · 2018-05-29 17:14:09Z

15

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);

answered May 29, 2018 at 17:14

hzwzw

1,12012 silver badges18 bronze badges

1 Comment

Computer says 'no'--SOooooo Jun 30 at 12:36

inputElement.value would normally have to be taken from the target though. Something like document.getElementById("query").value in OP's example. Actually, I see they save that element in the inputField const so event.target = inputField would be simpler.

Thomas Williams · Accepted Answer · 2024-11-14 20:07:26Z

I find it important to notice, that the input event has some complexity around the event.inputType property which can be challenging to mimic.

The inputType event property is used to determine the kind of change that was performed, since the input event is triggered after the change has taken place.

Notice, it is not allowed to set the inputType as an event detail on a system event, but this work-around seems to work in my own tests.

    const inpType = "insertText";

    const evt = new Event('input', { bubbles: true, cancelable: true })
    evt.inputType = inpType;
    inputField.dispatchEvent(evt);

Please read this documentation (and try the sample within) on Mozilla.org

Here are the behaviors triggering the various inputType enums: w3c.org

P. Drozd · Accepted Answer · 2018-03-19 18:03:15Z

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, 2018 at 18:03

P. Drozd

925 bronze badges

2 Comments

Sagi Nadav Over a year ago

I prefer an event-based solution

calabash Over a year ago

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.

Collectives™ on Stack Overflow

Howto trigger input event programmatically on input text field?

4 Answers 4

1 Comment

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related