先介绍一下情况，我在尝试用油猴实现一个网站（基于 vue 开发）的免登陆。但是在使用 HTMLElement.value = '123'修改 input 的值时出了问题：

修改完了之后输入框的值确实被替换成了 123，但是点一下页面发现数据瞬间消失了。

也就是说虽然我们确实修改了账号密码输入框的值，但是其背后的代码并没有意识到这一切，特别是 Vue 这种基于数据绑定的框架，当页面重新获取焦点的时候，输入框的 value 会被直接同步成原先的数据（也就是空值）。

解决方案

解决方案其实很简单，在修改完 value 之后发射一个新事件即可：

// 获取用户名输入框
const inputBox = document.getElementById('username')

// 修改值并发射 input 事件
inputBox.value = '123'
inputBox.dispatchEvent(new Event('input'))

这里顺带多提一下，我之前搜索的时候看到网上有很多的解决方案，比如使用 keyCode 模拟键盘输入。或者Document.createEvent()之后再Event.initEvent()，然而自己尝试的时候都不行，搞了一上午，最后还是翻 MDN 之后找到了解决方法（并且发现 Document.createEvent 已经被废弃了），所以在尝试解决方法的时候尽量还是先通过官方文档了解一下再执行比较好。

参考

• MDN - input 事件