Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

尝试此操作手动调度事件，请参阅EventTarget.dispatchEvent()：

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

Answer 2

如果我理解正确，您希望输入文本更改并在单击＆＃34时显示警告;更改＆＃34;按钮。由于changeText（）函数只是更改文本，因此您不应期望显示警报。

您可以将alertTextInput（）函数添加到changeText（）的底部。

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

Answer 3

来自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 个答案: