当前位置：首页 > JavaScript

js 实现键盘输入

2026-04-04 07:44:05JavaScript

监听键盘事件

在JavaScript中，可以通过监听键盘事件来捕获用户的键盘输入。主要使用的事件类型包括keydown、keyup和keypress。以下是基本的实现方法：

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

keydown事件在用户按下键盘上的任意键时触发，keyup事件在释放键时触发，而keypress事件在按下可打印字符键时触发。

获取按键信息

键盘事件对象（event）提供了多个属性来获取按键的详细信息：

event.key：返回按键的字符串表示（如“a”、“Enter”）。
event.code：返回物理按键的代码（如“KeyA”、“Enter”）。
event.keyCode（已弃用）：返回按键的ASCII码值。

document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        console.log('Enter key pressed');
    }
});

阻止默认行为

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

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

组合键检测

可以通过检查event.ctrlKey、event.shiftKey或event.altKey属性来检测是否同时按下了组合键：

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

表单输入控制

对于表单输入框，可以直接监听输入事件或键盘事件来实现特定逻辑：

const inputField = document.getElementById('myInput');
inputField.addEventListener('keyup', function(event) {
    console.log('Input value:', event.target.value);
});

游戏开发中的键盘控制

在游戏开发中，通常需要持续监听按键状态以实现角色移动等操作。可以通过记录按键状态来实现：

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');
    }
    requestAnimationFrame(gameLoop);
}
gameLoop();