当前位置：首页 > JavaScript

js实现键盘输入

2026-01-30 12:26:30JavaScript

监听键盘事件

在JavaScript中，可以通过addEventListener监听键盘事件。常用的事件类型包括keydown、keyup和keypress。keydown在按键按下时触发，keyup在按键释放时触发，keypress在按键按下并产生字符时触发（已废弃，不推荐使用）。

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

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

获取按键信息

事件对象event包含按键的详细信息，常用属性如下：

event.key: 返回按键的字符串表示（如"a"、"Enter"）。
event.code: 返回物理按键的代码（如"KeyA"、"Enter"）。
event.ctrlKey、event.shiftKey、event.altKey、event.metaKey: 返回布尔值，表示是否按下了修饰键。

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

阻止默认行为

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

js实现键盘输入

document.addEventListener('keydown', function(event) {
    if (event.key === ' ') {
        event.preventDefault();
        console.log('空格键被阻止');
    }
});

组合键监听

通过检查修饰键状态，可以实现组合键监听。例如监听Ctrl+C：

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 'c') {
        console.log('按下了Ctrl+C');
    }
});

输入框焦点控制

通过focus()和blur()方法可以控制输入框的焦点。例如按下Tab键切换焦点：

js实现键盘输入

const inputs = document.querySelectorAll('input');
document.addEventListener('keydown', function(event) {
    if (event.key === 'Tab') {
        event.preventDefault();
        const currentInput = document.activeElement;
        let index = Array.from(inputs).indexOf(currentInput);
        index = (index + 1) % inputs.length;
        inputs[index].focus();
    }
});

虚拟键盘模拟

可以通过创建自定义按钮模拟虚拟键盘，触发键盘事件：

const button = document.createElement('button');
button.textContent = '模拟按键A';
button.addEventListener('click', function() {
    const event = new KeyboardEvent('keydown', { key: 'a' });
    document.dispatchEvent(event);
});
document.body.appendChild(button);

游戏控制示例

在游戏开发中，键盘输入常用于控制角色移动：

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('向上移动');
    if (keys['ArrowDown']) console.log('向下移动');
    requestAnimationFrame(gameLoop);
}
gameLoop();