如何通过自定义键盘事件和keyCode更改输入/文本区域值？

Question

我想通过触发键盘事件来填充文本区域，例如keydown（我正在为测试用例进行此操作。

我在下面添加了一个代码段，以显示用于创建和触发事件的代码。事件触发，但是textarea从未接收到keyCode的值，即字母A。

我需要怎么做才能在文本区域中看到字母？我目前正在Chrome控制台中运行该代码段，但它也可以在IE9中使用。

var t = document.getElementById('foo');

// Event creation
var event = document.createEvent('HTMLEvents');
event.initEvent('keydown', true, true);
event.keyCode = 65;
event.which = 65;

// Listener for demo purpose
t.addEventListener('keydown', function (e) {
  document.getElementById('fired').value = e.type + ' fired';
});

// Event trigger
t.dispatchEvent(event);

<textarea id="foo"></textarea>

<br>
<input id="fired" value="">

Answer 1

keydown事件在按下某个键时被触发，但这不是负责将数据写入DOM元素的原因。

这是;如果用户首先在<textarea>上书写，则将字符添加到元素值，然后触发keyDown事件。但是，根据您的情况，您将直接触发事件，因此不会发生将字符添加到<textarea>的值的第一步。

您有两个选择，可以通过浏览器方式写入值，然后分派事件

t.value = t.value + String.fromCharCode(e.keyCode);
t.addEventListener('keydown', function (e) {
  document.getElementById('fired').value = e.type + ' fired';
});

或者您也可以在<textarea>事件上写入keyDown的值：

// Listener for demo purpose
t.addEventListener('keydown', function (e) {
  t.value = t.value + String.fromCharCode(e.keyCode);
  document.getElementById('fired').value = e.type + ' fired';
});

但是，如果您想使用第二种方法进行用户交互，这是胡说八道，因为在用户输入数据的情况下，数据将被写入两次（一次用于用户输入，另一次用于事件）。

希望这会有所帮助，

Answer 2

Javascript sending key codes to a <textarea> element

我环顾四周，这似乎比我以前无关的答案更相关。对于那个很抱歉。我知道这是jquery，但前提是相同的。

将其添加到活动中将起作用

document.getElementById('foo').innerHTML += String.fromCharCode(e.keyCode);

这里是纯JavaScript jsfiddle