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

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

解决思路

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

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

代码

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