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

【问题标题】：Howto trigger input event programmatically on input text field?如何在输入文本字段上以编程方式触发输入事件？
【发布时间】：2018-03-19 17:50:45
【问题描述】：

正如您在下面的代码部分中看到的，一旦您单击一个按钮，字段中的文本就会发生变化但该事件不会被触发（并且它不会运行 alertTextInput() 方法），当您直接在文本字段下键入文本时，事件会按预期触发。

如何使用代码或使用更改文本并触发事件的方法手动激活事件？谢谢！

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>

【问题讨论】：

你想改变什么文字？我很难理解你的问题
我假设您在通过inputField.value = "Demo Text!!"; 更改文本后询问如何让alertTextInput() 运行 - 不幸的是，这不被视为输入事件侦听器的事件。我相信你必须手动调用它。
可能重复：stackoverflow.com/questions/16013024/…
这是另一个副本 - stackoverflow.com/questions/42427606/…
欢迎大家看下面的答案，从我的印象来看问题与上面的链接没有重复。

标签： javascript

【解决方案1】：

试试这个手动派发事件，见EventTarget.dispatchEvent()：

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

【讨论】：

【解决方案2】：

来自React Doc

React 期望听到 input 事件

所以设置值后触发input事件。 This is how to trigger.

最终代码为：

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

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

【讨论】：

【解决方案3】：

如果我理解正确，您希望更改输入文本并在单击“更改”按钮时显示警报。由于 changeText() 函数只是更改文本，因此您不应该期望出现警报。

您可以将 alertTextInput() 函数添加到 changeText() 的底部。

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

【讨论】：

我更喜欢基于事件的解决方案
我遇到了与 OP 类似的情况，发现这个答案对我很有用。我尝试将 dispatchEvent("input) 与 addEventListener("input", myfunc) 配对，但由于某种原因它不起作用。我喜欢你的简单解决方案。所以谢谢。