js自动模拟用户键盘输入/自动触发输入事件/自动触发input事件

最凶残的小海豹2023-11-01 18:35

起因： 写Chrome扩展的时候，input 框自动填写内容后，无法触发表单的提交，需要出发input事件。

解决方式： 参考 https://blog.csdn.net/weixin_42649856/article/details/128582733 的解决办法。

代码：

javascript 复制代码

// 获取 input 输入框的dom对象
var element_input = window.document.querySelector('input');

// JavaScript 中的 `_valuetracker` 方法常常用于监听 HTML 表单元素（如 input，select，textarea 等）的值变化，并在每次值发生变化时执行回调函数。
if(element_input._valueTracker) var _templMethod = element_input._valueTracker.getValue;
if(element_input.getValue) var _templMethod = element_input.getValue;
if(element_input._valueTracker) element_input._valueTracker.getValue = () => '';

// 修改input的值
element_input.value = '123';

// 设置输入框的 input 事件
var event = new InputEvent('input', {
   'bubbles': true,		// 表示事件对象是否冒泡
   'cancelable': true,	// 表示事件是否可以被取消，即能否用Event.preventDefault()取消这个事件。
});
// 触发 dom 对象的 input 事件
element_input.dispatchEvent(event);

// 将`_valuetracker`的值（方法）重新绑定
if(element_input._valueTracker) element_input._valueTracker.getValue = _templMethod;

直接用上面代码就可以。

注意： 如果获取不到 _valuetracker 的话，直接用下面的代码也是可以的，我就遇见到无法获取 _valuetracker 的情况

javascript 复制代码

// 获取 input 输入框的dom对象
var element_input = window.document.querySelector('input');

// 修改input的值
element_input.value = '123';

// 设置输入框的 input 事件
var event = new InputEvent('input', {
   'bubbles': true,		// 表示事件对象是否冒泡
   'cancelable': true,	// 表示事件是否可以被取消，即能否用Event.preventDefault()取消这个事件。
});
// 触发 dom 对象的 input 事件
element_input.dispatchEvent(event);