当前位置：首页 > JavaScript

键盘 js 实现

2026-04-05 08:54:06JavaScript

键盘事件监听实现

使用JavaScript监听键盘事件可以通过addEventListener方法实现。以下是基本代码示例：

键盘 js 实现

document.addEventListener('keydown', function(event) {
  console.log('按键按下:', event.key);
});

document.addEventListener('keyup', function(event) {
  console.log('按键释放:', event.key);
});

常用键盘事件类型

keydown: 按键按下时触发
keyup: 按键释放时触发
keypress: 按键按下并产生字符时触发（已废弃，不推荐使用）

获取按键信息

事件对象包含以下常用属性：

键盘 js 实现

event.key        // 返回按键的字符串表示（如"a"、"Enter"）
event.code       // 返回物理按键代码（如"KeyA"、"Enter"）
event.which      // 返回按键的ASCII码（已废弃）
event.keyCode    // 返回按键的ASCII码（已废弃）

组合键检测

检测组合键（如Ctrl+C）：

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'c') {
    console.log('Ctrl+C pressed');
  }
});

阻止默认行为

阻止按键的默认行为：

document.addEventListener('keydown', function(event) {
  if (event.key === 'Space') {
    event.preventDefault(); // 阻止空格键滚动页面
  }
});

完整示例

<!DOCTYPE html>
<html>
<body>
<script>
document.addEventListener('keydown', function(e) {
  const output = document.getElementById('output');
  output.innerHTML = `
    Key: ${e.key}<br>
    Code: ${e.code}<br>
    Ctrl: ${e.ctrlKey}<br>
    Shift: ${e.shiftKey}<br>
    Alt: ${e.altKey}<br>
    Meta: ${e.metaKey}
  `;

  if (e.ctrlKey && e.key === 's') {
    e.preventDefault();
    alert('保存操作被拦截');
  }
});
</script>
<div id="output">按下任意键查看信息</div>
</body>
</html>