当前位置：首页 > JavaScript

js 实现按键

2026-03-14 06:26:45JavaScript

监听键盘事件

在JavaScript中，可以通过addEventListener监听键盘事件。常用的事件类型包括keydown、keyup和keypress。

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

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

获取按键信息

事件对象event包含按键的详细信息：

js 实现按键

event.key: 返回按键的字符串表示（如 "A"、"Enter"）。
event.code: 返回物理按键的代码（如 "KeyA"、"Enter"）。
event.which 或 event.keyCode: 返回按键的ASCII码（已废弃，建议使用key或code）。

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

检测组合键

通过检查event.ctrlKey、event.shiftKey、event.altKey和event.metaKey属性，可以检测是否按下了修饰键。

js 实现按键

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault(); // 阻止默认行为
        console.log('Ctrl + S 按下');
    }
});

阻止默认行为

某些按键会触发浏览器的默认行为（如F5刷新页面）。可以通过event.preventDefault()阻止。

document.addEventListener('keydown', function(event) {
    if (event.key === 'F5') {
        event.preventDefault();
        console.log('阻止了页面刷新');
    }
});

自定义按键映射

可以通过对象或Map实现自定义按键映射，用于游戏或快捷键功能。

const keyMap = {
    'ArrowUp': 'moveUp',
    'ArrowDown': 'moveDown',
    'ArrowLeft': 'moveLeft',
    'ArrowRight': 'moveRight'
};

document.addEventListener('keydown', function(event) {
    const action = keyMap[event.key];
    if (action) {
        console.log('执行动作:', action);
    }
});