当前位置：首页 > JavaScript

js 实现键盘输入

2026-01-30 16:02:55JavaScript

监听键盘事件

在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);
});

获取按键信息

键盘事件对象（KeyboardEvent）包含多个属性，用于获取按键的详细信息：

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('Enter key pressed');
    }
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault(); // 阻止默认行为
        console.log('Ctrl + S pressed');
    }
});

阻止默认行为

某些按键组合会触发浏览器的默认行为（如Ctrl+S保存页面）。可以通过event.preventDefault()阻止这些行为。

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

实现快捷键功能

通过监听特定按键组合，可以实现自定义快捷键功能。例如，监听Ctrl+Shift+P组合键：

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.shiftKey && event.key === 'P') {
        console.log('Custom shortcut triggered');
    }
});

输入框焦点控制

可以通过focus()和blur()方法控制输入框的焦点，结合键盘事件实现交互逻辑。

const input = document.getElementById('myInput');
document.addEventListener('keydown', function(event) {
    if (event.key === 'Tab') {
        event.preventDefault();
        input.focus();
    }
});

游戏控制示例

在游戏开发中，键盘输入常用于控制角色移动。以下是一个简单的方向键控制示例：

const keys = {};
document.addEventListener('keydown', function(event) {
    keys[event.key] = true;
    if (keys['ArrowUp']) console.log('Move up');
    if (keys['ArrowLeft']) console.log('Move left');
});

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

虚拟键盘实现

可以通过DOM元素模拟虚拟键盘，为触摸设备提供输入支持。以下是一个简单的虚拟键盘按钮点击事件：

js 实现键盘输入

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);
    });
});