在JavaScript 中检测键盘输入事件/

5 min read

监听键盘输入事件有多种方式，下面介绍其中两种：

  1. 使用 document.onkeydown 或 document.onkeypress 的事件监听器。
document.onkeydown = function(e) {
  e = e || window.event; // 处理兼容性
  console.log(e.keyCode); // 输出用户按下的按键编码
};

document.onkeypress = function(e) {
  e = e || window.event; // 处理兼容性
  console.log(String.fromCharCode(e.keyCode)); // 输出用户按下的字符
};
  1. 使用 addEventListener 方法。
document.addEventListener('keydown', function(e) {
  console.log(e.keyCode); // 输出用户按下的按键编码
});

document.addEventListener('keypress', function(e) {
  console.log(String.fromCharCode(e.keyCode)); // 输出用户按下的字符
});

需要注意的是，使用 document.onkeydown 和 document.onkeypress 可能会造成事件覆盖，而 addEventListener 则不会。另外，由于键盘输入事件可能会被浏览器本身的快捷键覆盖，因此有时候需要使用其他的处理方式，例如在特定的输入框中监听事件。