当前位置：首页 > JavaScript

js实现键盘

2026-04-05 20:32:59JavaScript

监听键盘事件

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

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

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

获取按键信息

事件对象event包含按键的详细信息，如key、code、keyCode（已废弃）等属性。

js实现键盘

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

阻止默认行为

某些按键会触发默认行为（如空格键滚动页面），可以通过preventDefault()阻止。

document.addEventListener('keydown', function(event) {
    if (event.key === ' ') {
        event.preventDefault();
        console.log('Spacebar pressed, default behavior prevented.');
    }
});

组合键检测

通过检查event.ctrlKey、event.altKey等属性可以检测组合键。

js实现键盘

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

虚拟键盘实现

如果需要创建一个虚拟键盘，可以通过HTML按钮模拟按键，并触发自定义事件。

<div id="keyboard">
    <button data-key="A">A</button>
    <button data-key="B">B</button>
</div>

<script>
    document.querySelectorAll('#keyboard button').forEach(button => {
        button.addEventListener('click', function() {
            const key = this.getAttribute('data-key');
            const event = new KeyboardEvent('keydown', { key: key });
            document.dispatchEvent(event);
        });
    });
</script>

游戏中的键盘控制

在游戏开发中，通常需要持续监听按键状态（如按住方向键移动角色）。

const keys = {};

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

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

function gameLoop() {
    if (keys['ArrowUp']) {
        console.log('Moving up');
    }
    requestAnimationFrame(gameLoop);
}

gameLoop();