JS 页面如何响应键盘快捷键?

17 min read

在JavaScript中，可以使用keydown或keyup事件来响应键盘快捷键。

首先，使用document.addEventListener()方法来监听keydown或keyup事件：

document.addEventListener("keydown", function(event) {
  // 处理按键事件
});

然后，在事件处理函数中，可以通过event.keyCode或event.key属性来获取按下的键的键码或键名。以下是处理快捷键的示例代码：

document.addEventListener("keydown", function(event) {
  if (event.keyCode === 65 && event.ctrlKey) {
    // Ctrl + A 快捷键被按下
    // 执行相应的操作
  }
});

在这个示例中，我们使用event.keyCode属性来检查按下的键是否为"A"键的键码是65，然后使用event.ctrlKey属性来检查是否同时按下了Ctrl键。

还可以使用event.key属性来直接判断按下的是哪个键：

document.addEventListener("keydown", function(event) {
  if (event.key === "a" && event.ctrlKey) {
    // Ctrl + A 快捷键被按下
    // 执行相应的操作
  }
});

使用event.preventDefault()方法可以阻止浏览器默认的键盘行为，如阻止浏览器打开新标签页。

请注意，在处理键盘事件时，最好添加条件来判断焦点是否在可输入的元素（如输入框）中，以免干扰用户正常的键盘输入操作。