Javascript 模拟输入并触发事件

发表于 更新于 分类于 阅读次数：

问题

通常我们编写脚本时会涉及到用户输入字符的操作。对于大部分网站来说，使用的都是input或者一些用contenteditable=true这种属性来完成用户的输入。

然而，网站通常会在用户输入时进行一些 JS 操作。因此，在 JS 脚本中，如果单纯地在input里面填入文字，它不会触发网站的 JS 操作。查询资料后，得知可以通过EventTarget.dispatchEvent来重新初始化事件。这样，在脚本填入文字时就能触发网站原本的操作了。

代码解决

以下是 whatApp 聊天输入框的捕获代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//获取输入框DOM元素

let list = document.querySelectorAll("div.selectable-text");
list[list.length - 1];

//new 一个动作事件设置冒泡事件来触发他的动作

let event = new Event("input", { bubbles: true });

list[list.length - 1].append("1234");

list[list.length - 1].dispatchEvent(event);

//点击触发，让它冒泡一下

list[list.length - 1].click();