Question

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

原因：我在没有提供API的网络界面上自动执行大量数据输入任务。使用.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

恕我直言，你这一切都错了。 Angular不是＆＃34;听＆＃34;至keypress等。它正在收听change和input个事件。请参阅下面的示例。它（确实很简单）你需要什么。

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 2

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

注意：手动触发事件不会生成默认操作与该事件相关联。例如，手动触发键事件不会导致该字母出现在焦点文本输入中。在里面在UI事件的情况下，出于安全原因，这很重要防止脚本模拟与之交互的用户操作浏览器本身。

感谢@gforce301

您最好的选择可能是设置值，然后发送活动。

Chrome：使用javascript

2 个答案: