Chrome:使用 javascript 在输入文本字段上模拟按键事件

Question

堆栈溢出中有很多内容，但似乎没有一个适用于我的情况。我有一个输入文本字段，我想模拟按键事件来填充文本字段。

原因：我在不提供 API 的 Web 界面上自动执行大量数据输入任务。使用.value更改输入字段不会触发接口的 JS 端(角度(。这就是为什么我想模拟按键事件。

首先我尝试了这个：

var inp = document.getElementById('rule-type');
inp.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));

然后我在 Chrome 中了解到key和code保持为 0，并且在KeyBoardEvent中没有变化。

所以我创建了单独的事件ev = new KeyboardEvent('keypress',{'key':'a', 'code': 'KeyA'})

然后我再次调度，返回语句true，但它不会更改输入字段。

解决方案需要是纯javascript而不是jQuery。

Answer 1

您将无法触发导致文本填充输入的事件。 请参阅来自 MDN 的这个片段：

注意：手动触发事件不会生成默认操作 与该事件相关联。例如，手动触发密钥事件 不会导致该字母出现在重点文本输入中。在 对于 UI 事件，出于安全原因，这很重要，因为它 防止脚本模拟与 浏览器本身。

谢谢@gforce301

最好的办法可能是设置值，然后调度事件。

Answer 2

恕我直言，你做错了。Angular 不是"听"keypress之类的。它正在倾听change和input事件。请参阅下面的示例。它确实(诚然很简单(你需要什么。

var iButton = document.getElementById('inputButton');
iButton.addEventListener('click', simulateInput);
var cButton = document.getElementById('changeButton');
cButton.addEventListener('click', simulateChange);
function simulateInput() {
var inp = document.getElementById('name');
var ev = new Event('input');

inp.value =inp.value + 'a';
inp.dispatchEvent(ev);
}
function simulateChange() {
var inp = document.getElementById('name');
var ev = new Event('change');

inp.value = 'changed';
inp.dispatchEvent(ev);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">

<p>Input something in the input box:</p>
<p>Name : <input id="name" type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
</div>
<button id="inputButton">I simulate the "input" event.</button>
<button id="changeButton">I simulate the "change" event.</button>

Answer 3

要自动填充<input>值和<textarea>值并自动调度您需要的所有所需事件，请执行以下操作：

1. 聚焦输入\文本区域
2. 使用insertText命令运行 document.execCommand

let inputElement = document.getElementsById('rule-type');
inputElement.focus();
document.execCommand('insertText', false, 'input value');

使用这种方法，输入\文本区域值修改应该被所有主要框架捕获，包括 Angular 和 Vuejs。此修改将由框架处理，其处理方式与用户在浏览器主菜单中按"粘贴"选项的方式相同。