如何使用自定义键盘事件和keyCode更改input / textarea值？

Question

我想通过触发键盘事件来填充textarea，例如keydown（我正在为测试案例执行此操作）。

我添加了一个代码段（下方），以显示我用来创建和触发事件的代码。该事件触发，但textarea永远不会收到keyCode的值，即字母A.

在textarea看到这封信我需要做什么？我目前正在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

Javascript sending key codes to a <textarea> element

我环顾四周，这似乎比我之前的非相关答案更有意义。对于那个很抱歉。我知道这是jquery，但前提是一样的。

在事件中添加此功能

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

这里是纯粹的javascript jsfiddle

Answer 2

按下某个键时会触发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 3

为什么触发keydown后值没有变化？

简而言之：您无法通过以编程方式调度 input 来更改 texarea/KeyboardEvent 的值。

字符实际上是如何进入 input 的？在 MDN 上，您可以找到 Keyboardevent sequence 的描述（假设未调用 preventDefault）：

<块引用>

• 首先触发 keydown 事件。如果进一步按住该键并且该键产生一个字符键，则该事件会在平台实现相关的时间间隔内继续发出，并且 KeyboardEvent.repeat 只读属性设置为 true。
• 如果键产生的字符键会导致字符被插入到可能的 <input>、<textarea> 或 HTMLElement.contentEditable 设置为 true 的元素中，则 beforeinput 和input 事件类型按该顺序触发。请注意，如果支持，某些其他实现可能会触发 keypress 事件。按住该键时，这些事件将重复触发。
• 释放键后会触发 keyup 事件。这样就完成了这个过程。

因此，默认情况下 keydown 会导致 input 事件。但这仅适用于 trusted events：

<块引用>

大多数不受信任的事件都不会触发默认操作，但 click 事件除外...所有其他不受信任的事件的行为就像在该事件上调用了 preventDefault() 方法一样。

基本上受信任的事件是由用户发起的，不受信任的事件是由脚本发起的。在大多数浏览器中，每个事件都有一个属性 isTrusted，指示该事件是否可信。

然后如何在 KeyboardEvent 上测试 input？

嗯，首先，想想你是否真的需要一个 KeyboardEvent 处理程序。也许你可以在 InputEvent 处理程序中做任何事情。这意味着您只需在测试中设置 input 的值，然后触发 InputEvent。

如果您仍然需要 KeyboardEvent 处理程序，则取决于其中发生了什么。例如。如果您在某些条件下调用 preventDefault，那么您可以使用间谍检查它是否在测试中被调用。这是一个示例，其中 sinon 作为间谍，chai 作为断言库。

const myEvent = new KeyboardEvent('keydown', { key: 'a' })
sinon.spy(myEvent, 'preventDefault')
document.getElementById('foo').dispatchEvent(myEvent)
expect(myEvent.preventDefault.calledOnce).to.equal(true)