当前位置：首页 > JavaScript

js实现键盘

2026-02-01 04:09:42JavaScript

监听键盘事件

在JavaScript中，可以通过addEventListener来监听键盘事件。常用的事件类型包括keydown、keyup和keypress。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（已废弃）等。key返回按键的字符值，code返回物理按键的代码。

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

阻止默认行为

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

js实现键盘

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

组合键检测

通过检查event.ctrlKey、event.shiftKey、event.altKey和event.metaKey，可以检测是否按下了组合键。

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

游戏中的键盘控制

在游戏开发中，通常需要持续监听按键状态。可以通过一个对象来跟踪按键的按下和释放状态。

js实现键盘

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');
    }
    if (keys['ArrowDown']) {
        console.log('Moving down');
    }
    requestAnimationFrame(gameLoop);
}

gameLoop();

虚拟键盘实现

如果需要实现一个虚拟键盘，可以通过HTML按钮模拟按键，并触发对应的键盘事件。

<button class="key" data-key="A">A</button>
<button class="key" data-key="B">B</button>

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

键盘事件兼容性

不同浏览器对键盘事件的支持可能略有差异。keyCode已废弃，推荐使用key和code属性。对于老旧浏览器，可能需要使用keyCode作为备选方案。

document.addEventListener('keydown', function(event) {
    const key = event.key || String.fromCharCode(event.keyCode);
    console.log('Pressed key:', key);
});