通过js脚本改变input元素的value值时无法触发change事件的解决方案

模拟用户输入解决油猴脚本登录问题

原创已于 2022-07-28 14:36:13 修改 · 6.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-07-28 11:33:59 首次发布

当使用油猴脚本直接赋值给input元素的value属性无法触发change事件，导致登录失败时，可以采用模拟用户输入的方法。通过调用`focus()`使input获取焦点，再利用`document.execCommand('inserttext', false, 'username')`模拟粘贴操作，成功触发change事件，实现自动登录。

最近用油猴写自动脚本时发现，在登录时直接把信息赋给对应input元素的value变量后，无法触发change事件导致登录失败。在网上查询了好几篇说这事的文章全都是在胡说八道，最后还是自己摸索出解决方案，在这分享给大家，以正视听。

解决思路

既然直接赋值无法触发，那么如果模拟用户操作输入信息的的过程能否触发呢？而在document下的execCommand方法，可以通过执行指令模拟复制粘贴等操作。

execCommand方法

其中insertText指令，可以在光标处插入选中的内容，因此先通过focus方法使input元素获取焦点，然后insertText通过指令插入对应信息，即可模拟点击粘贴的过程。

在这里插入图片描述

代码

//获取目标input元素
let user = document.querySelector("input#userName");
//给目标input设置焦点
user.focus();
//模拟粘贴操作
document.execcommand('inserttext', false, 'username');