javascript 开发语言 ecmascript js自动模拟用户键盘输入/自动触发输入事件/自动触发input事件

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

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

代码：

// 获取 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 的情况

// 获取 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);

相关文章

 您阅读本篇文章共花了：