当前位置：首页 > JavaScript

js怎么实现组合键

2026-01-31 09:12:11JavaScript

监听键盘事件

在JavaScript中实现组合键功能，主要通过监听键盘的keydown和keyup事件。组合键的核心逻辑是记录当前按下的键，并在特定组合满足时触发相应操作。

js怎么实现组合键

let keysPressed = {};

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

    // 检测组合键 Ctrl + S
    if (keysPressed['Control'] && event.key === 's') {
        event.preventDefault(); // 阻止默认保存行为
        console.log('Ctrl + S pressed');
    }
});

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

使用事件对象的属性

事件对象提供了ctrlKey、shiftKey、altKey和metaKey等属性，可以直接判断是否按下了这些修饰键。

js怎么实现组合键

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

支持多键组合

如果需要支持多个非修饰键的组合（例如 A + B），可以通过维护一个按下键的集合来实现。

const activeKeys = new Set();

document.addEventListener('keydown', (event) => {
    activeKeys.add(event.key);

    if (activeKeys.has('a') && activeKeys.has('b')) {
        console.log('A + B pressed');
    }
});

document.addEventListener('keyup', (event) => {
    activeKeys.delete(event.key);
});

封装为可复用函数

将组合键检测逻辑封装成函数，方便重复使用。

function registerCombo(comboKeys, callback) {
    const pressedKeys = new Set();

    document.addEventListener('keydown', (event) => {
        pressedKeys.add(event.key.toLowerCase());

        const allPressed = comboKeys.every(key => 
            pressedKeys.has(key.toLowerCase())
        );

        if (allPressed) {
            callback(event);
            event.preventDefault();
        }
    });

    document.addEventListener('keyup', (event) => {
        pressedKeys.delete(event.key.toLowerCase());
    });
}

// 使用示例
registerCombo(['control', 's'], () => {
    console.log('Custom Ctrl + S handler');
});