当前位置：首页 > JavaScript

js怎么实现组合键

2026-04-05 01:13:38JavaScript

监听键盘事件

通过 keydown 和 keyup 事件监听键盘操作。使用 event.key 或 event.code 识别具体按键。

document.addEventListener('keydown', function(event) {
  console.log('Key pressed:', event.key);
});

记录按键状态

创建对象存储当前按下的键状态。keydown 时标记为 true，keyup 时标记为 false。

js怎么实现组合键

const keysPressed = {};

document.addEventListener('keydown', function(event) {
  keysPressed[event.key] = true;
});

document.addEventListener('keyup', function(event) {
  keysPressed[event.key] = false;
});

检测组合键

在 keydown 事件中检查多个键是否同时被按下。例如检测 Ctrl + C：

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

自定义组合键逻辑

通过遍历 keysPressed 对象实现自定义组合键检测。例如检测 A + B：

js怎么实现组合键

document.addEventListener('keydown', function(event) {
  if (keysPressed['a'] && keysPressed['b']) {
    console.log('A + B pressed');
  }
});

防止默认行为

某些组合键可能触发浏览器默认行为（如 Ctrl + S 保存页面）。使用 event.preventDefault() 阻止默认行为。

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    console.log('Ctrl + S blocked');
  }
});

完整示例代码

以下代码实现 Shift + A + B 组合键检测：

const keysPressed = {};

document.addEventListener('keydown', function(event) {
  keysPressed[event.key] = true;

  if (keysPressed['Shift'] && keysPressed['a'] && keysPressed['b']) {
    console.log('Shift + A + B pressed');
    // 执行自定义操作
  }
});

document.addEventListener('keyup', function(event) {
  keysPressed[event.key] = false;
});