如何模拟适用于 JavaScript 中的字母数字和不可打印字符的跨浏览器按键？

Question

这是 Is it possible to simulate key press events programmatically? 的一个更具体的问题每个答案都以某种方式缺少以下信息，从而降低了问题的价值。我已经在那里尝试了三件在现代浏览器中不起作用的东西，或者被官方消息来源建议不要这样做。

这是我要查找的内容：

在回答时，每个示例都应该适用于现代版本的 Firefox 和 Chrome.
没有示例包括已弃用的对象、字段、属性或函数。
~~每个答案都应该包括在文本字段和文本区域中键入可打印字符的方法。~~
每个答案都应该包括一种在输入没有焦点时键入字母数字字符的方法。例如，“a”、“b”、“c”等
每个答案都应该包括一种输入不可打印字符的方法。例如，向下翻页、向左箭头、F1 键（如果不可能，也可以这样说明）、Enter 等。
每个答案都应该包含模拟字母数字字符和不可打印字符所需的所有“代码”的 link，或者更好的是，将该信息嵌入到答案中。我在这里宽松地使用术语“代码”：我的意思是任何适合满足第二点的术语。

Answer 1

此解决方案满足所有条件：

此示例适用于现代版本的 chrome 和 firefox (https://caniuse.com/dispatchevent) (https://caniuse.com/keyboardevent-key)
此示例不包含任何已弃用的内容
N/A
支持字母数字字符
这个解决方案是可能的
您可以将 key 设置为这些值之一 https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values （我会嵌入这个，但是，有很多代码）

Ctrl：使用ctrlKey选项（布尔值）
Alt：使用 altKey 选项（布尔值）
Shift：使用shiftKey选项（布尔值）
元Key/Command键：使用metaKey选项（布尔值）

function simulateKeypress(target, options) {
  target.dispatchEvent(new KeyboardEvent('keydown', options));
}

document.addEventListener("keydown", event => {
  console.log(event.key);
});

 
setTimeout(() => {

  simulateKeypress(document, {
    key: "F1"
  });
}, 1000);

Answer 2

（如已在链接的原始问题中所述，它是 unclear what "simulate" means here。但是:)

我们在 @testing-library/user-event.

维护了一个用于模拟用户事件进行测试的包

这包括 userEvent.type() API for conveniently simulating keyboard input to input elements as well as userEvent.keyboard() API 用于在任何地方模拟键盘事件。该库模拟常见的浏览器行为。它将调度键事件、更改元素值、移动选择和焦点 - 取决于按下的键和可能的自定义事件处理程序，例如停止传播。

该库的主要目标受众是使用 jest 和 jsdom 进行测试，但也支持其他环境，包括在真实浏览器中进行测试。

（有关示例和进一步说明，请参阅链接文档。对于缺少的功能、错误等：始终欢迎在链接的 Github 存储库中提出问题和 PR :)）

如何模拟适用于 JavaScript 中的字母数字和不可打印字符的跨浏览器按键？

How do I simulate a cross browser key press that works for alphanumeric and non-printable characters in JavaScript?

javascript

dom-events