如何在输入文本字段上以编程方式触发输入事件？

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> 

Answer 1

尝试这个手动调度事件，请参阅EventTarget.dispatchEvent（） ：

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

Answer 2

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

Answer 3

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