当前位置：首页 > JavaScript

js实现键盘

2026-03-14 02:25:36JavaScript

键盘事件监听

在JavaScript中，可以通过监听键盘事件来响应用户的按键操作。常用的事件包括keydown、keyup和keypress。

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

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

常用键盘事件属性

键盘事件对象包含多个属性，用于获取按键信息：

event.key: 返回按键的字符串表示（如 "A"、"Enter"）。
event.code: 返回物理按键的代码（如 "KeyA"、"Enter"）。
event.keyCode: 已废弃，返回按键的ASCII码（不推荐使用）。
event.ctrlKey/event.shiftKey/event.altKey: 布尔值，表示是否按下修饰键。

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

实现键盘快捷键

通过组合键和特定按键可以实现快捷键功能：

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 'k') {
        console.log('Ctrl+K 快捷键触发');
        event.preventDefault();
    }
});

游戏中的键盘控制

在游戏开发中，通常需要持续监听按键状态以实现移动等操作：

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['ArrowLeft']) {
        console.log('向左移动');
    }
    requestAnimationFrame(gameLoop);
}
gameLoop();

虚拟键盘实现

创建一个屏幕虚拟键盘需要HTML/CSS构建界面，并通过JavaScript绑定点击事件：

<div class="keyboard">
    <button data-key="A">A</button>
    <button data-key="B">B</button>
    <!-- 更多按键 -->
</div>

document.querySelectorAll('.keyboard button').forEach(button => {
    button.addEventListener('click', function() {
        const keyEvent = new KeyboardEvent('keydown', {
            key: this.getAttribute('data-key')
        });
        document.dispatchEvent(keyEvent);
    });
});

输入框增强

为输入框添加特殊键盘处理，如自动格式化或限制输入：

js实现键盘

const input = document.getElementById('phone-input');
input.addEventListener('keydown', function(event) {
    // 只允许数字、退格和删除键
    if (!/[0-9]|Backspace|Delete/.test(event.key)) {
        event.preventDefault();
    }
});