在 JavaScript 中模拟按键

本文将讨论如何在 JavaScript 中以编程方式触发按键事件。

在 JavaScript 中使用 dispatchEvent 方法模拟按键

我们可以使用 dispatchEvent 方法来触发特定事件。

例子：

window.addEventListener('keydown', (e) => {
    console.log(e)
})

window.dispatchEvent(new KeyboardEvent('keydown', {
    'key': 'b'
}));

点击这里运行上面的代码。

监听并触发 keydown 事件

为了监听 keydown 事件，我们使用 addEventListener 和’keydown’参数。然后通过使用 KeyboardEvent 实例调用 window.dispatchEvent 来触发此事件。

在构造函数的第一个参数中，我们指定要触发的键盘事件的类型。在第二个参数中，我们传递一个带有选项的对象以在事件对象中设置。

因此，在登录回调时运行 dispatchEvent 后 e.key 应该是 b。

如上所述，该程序可以在对象中设置更多选项。

例子：

window.addEventListener('keydown', (e) => {
  console.log(e)
})

window.dispatchEvent(new KeyboardEvent('keydown', {
    key: "b",
    keyCode: 66,
    code: "KeyE",
    which: 66,
    shiftKey: false,
    ctrlKey: false,
    metaKey: false
}));

点击这里运行上面的代码。

为对象提供更多选项

我们要设置的键的数字代码是 keyCode。键名编码在代码中，其中包含键盘键的编号。

如果我们除了要按的键之外还想按 Shift 键，我们可以将 shiftKey 设置为 true。

ctrlKey 决定我们是否要在当前键之外按下 Ctrl 键。如果我们要按下元键，我们将 metaKey 设置为 true。

元键是 PC 键盘上的 Windows 键，而它是 Mac 键盘上的 Command 键。

当事件被触发时，我们应该会看到在 addEventListener 回调中记录的所有选项。它们应该与我们传递给 KeyboardEvent 构造函数的选项对象位于相同的 e 对象属性中。

使用 keyup 事件，我们可以编写相同的代码。在任何地方，我们都将 keydown 替换为 keyup。

我们甚至可以使用 JavaScript 中的 dispatch 方法通过事件对象来模拟按键事件。KeyboardEvent 构造函数可以创建具有各种选项的键盘事件。