当前位置：首页 > JavaScript

js实现键盘输入

2026-04-04 04:05:41JavaScript

监听键盘事件

使用 addEventListener 监听键盘事件，常见的事件类型包括 keydown、keyup 和 keypress。keydown 和 keyup 可以捕获所有按键，而 keypress 通常用于字符键。

document.addEventListener('keydown', function(event) {
    console.log('Key pressed:', 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' && event.ctrlKey) {
        console.log('Ctrl + Enter pressed');
    }
});

阻止默认行为

某些按键会触发默认行为（如空格键滚动页面）。使用 event.preventDefault() 阻止默认行为。

js实现键盘输入

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

实现组合键

通过检查修饰键状态实现组合键功能。

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

表单输入控制

监听输入框的键盘事件，实现实时验证或限制输入。

js实现键盘输入

const input = document.getElementById('myInput');
input.addEventListener('keypress', function(event) {
    if (!/[0-9]/.test(event.key)) {
        event.preventDefault();
        console.log('Only numbers allowed');
    }
});

游戏控制示例

通过键盘控制游戏角色移动。

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

移除事件监听

不需要时移除事件监听以避免内存泄漏。

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

// 移除监听
document.removeEventListener('keydown', handleKeyPress);