js怎么实现组合键
监听键盘事件
使用 keydown 和 keyup 事件监听键盘操作。通过 event.key 或 event.code 获取按下的键值，避免使用已废弃的 event.keyCode。
document.addEventListener('keydown', (event) => {
console.log('Key pressed:', event.key);
});
document.addEventListener('keyup', (event) => {
console.log('Key released:', event.key);
});记录按键状态
创建对象存储当前按下的键状态。在 keydown 时标记为 true，keyup 时标记为 false。
const keysPressed = {};
document.addEventListener('keydown', (event) => {
keysPressed[event.key] = true;
});
document.addEventListener('keyup', (event) => {
keysPressed[event.key] = false;
});检测组合键
通过检查多个键的状态实现组合键检测。例如检测 Ctrl + C：
document.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key === 'c') {
console.log('Ctrl+C pressed');
event.preventDefault(); // 阻止默认行为
}
});自定义组合键逻辑
实现非修饰键的组合（如 A + B）。通过定时器清除过期的按键状态避免误判。
let lastKeyPressTime = 0;
const COMBO_DELAY = 500; // 组合键间隔毫秒
document.addEventListener('keydown', (event) => {
const currentTime = Date.now();
if (keysPressed['a'] && event.key === 'b' &&
currentTime - lastKeyPressTime < COMBO_DELAY) {
console.log('A+B combo detected');
}
lastKeyPressTime = currentTime;
keysPressed[event.key] = true;
});完整示例代码
const comboKeys = {
isCtrlCPressed: false,
isABComboPressed: false,
lastKeyTime: 0
};
document.addEventListener('keydown', (e) => {
// Ctrl + C 检测
if (e.ctrlKey && e.key === 'c') {
comboKeys.isCtrlCPressed = true;
console.log('Ctrl+C pressed');
e.preventDefault();
}
// A+B 组合检测
const now = Date.now();
if (e.key === 'a' || e.key === 'b') {
if (now - comboKeys.lastKeyTime < 500) {
comboKeys.isABComboPressed = true;
console.log('A+B combo pressed');
}
comboKeys.lastKeyTime = now;
}
});
document.addEventListener('keyup', (e) => {
if (e.key === 'Control') comboKeys.isCtrlCPressed = false;
});注意事项
- 浏览器可能已占用某些组合键（如
Ctrl+S） - 移动端设备对组合键支持有限
- 不同键盘布局可能导致键位识别差异
- 使用
event.preventDefault()需谨慎，可能影响默认功能
高级技巧
对于复杂场景可考虑使用键盘事件库（如 keymaster.js 或 mousetrap.js）。这些库提供更简洁的API：
Mousetrap.bind('ctrl+c', () => {
console.log('Ctrl+C with library');
return false;
});
