如何在通过JavaScript为输入框赋值时触发事件

我懂你碰到的这个麻烦——当你直接用JavaScript代码给输入框赋值时，浏览器并不会自动触发oninput事件，毕竟这个事件原本是为用户手动输入这类交互场景设计的。不过别担心，咱们可以手动触发对应的事件来搞定这个问题。

具体解决方案 #

你只需要在赋值之后，调用输入框元素的dispatchEvent方法，手动创建并触发一个input事件就行。修改后的完整代码如下：

<!DOCTYPE html>
<html>
<body>
<p>在文本框中输入内容以触发函数。</p>
<input type="text" id="myInput" oninput="myFunction()">
<p id="demo"></p>
<script>
const inputElement = document.getElementById("myInput");
// 给输入框赋值
inputElement.value = 100;
// 手动触发input事件，触发绑定的myFunction
inputElement.dispatchEvent(new Event('input'));

function myFunction() {
  var x = document.getElementById("myInput").value;
  document.getElementById("demo").innerHTML = "您输入的内容是: " + x;
}
</script>
</body>
</html>

兼容旧浏览器的写法（比如IE） #

如果你的项目需要兼容一些老旧浏览器，可以用下面这种更传统的事件创建方式：

const inputElement = document.getElementById("myInput");
inputElement.value = 100;

// 兼容旧浏览器的事件触发写法
const event = document.createEvent('Event');
event.initEvent('input', true, true); // 第二个参数表示事件是否可冒泡，第三个表示是否可取消
inputElement.dispatchEvent(event);

原理说明 #

程序通过代码给输入框赋值属于非用户交互操作，浏览器不会自动触发oninput、onchange这类依赖用户交互的事件。所以必须手动创建事件并触发，才能让绑定的回调函数执行。

内容的提问来源于stack exchange，提问作者zaster