当前位置：首页 > JavaScript

js 实现按键

2026-02-01 07:56:08JavaScript

监听键盘事件

在JavaScript中，可以通过监听键盘事件来实现按键功能。常用的事件包括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.keyCode（已废弃）：返回按键的ASCII码。

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

检测组合键

可以通过检查event.ctrlKey、event.shiftKey、event.altKey和event.metaKey来检测组合键：

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

模拟按键事件

可以通过KeyboardEvent构造函数模拟按键事件：

const event = new KeyboardEvent('keydown', {
    key: 'A',
    code: 'KeyA',
    keyCode: 65,
    bubbles: true
});
document.dispatchEvent(event);

游戏开发中的按键处理

在游戏开发中，通常需要持续监听按键状态：

const keys = {};

document.addEventListener('keydown', (event) => {
    keys[event.key] = true;
});

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

function gameLoop() {
    if (keys['ArrowUp']) {
        console.log('向上移动');
    }
    requestAnimationFrame(gameLoop);
}
gameLoop();

移动端虚拟键盘

对于移动端，可以通过监听input或focus事件触发虚拟键盘：

js 实现按键

const input = document.createElement('input');
input.type = 'text';
input.style.position = 'fixed';
input.style.top = '0';
document.body.appendChild(input);

input.addEventListener('focus', () => {
    console.log('虚拟键盘弹出');
});

input.addEventListener('blur', () => {
    console.log('虚拟键盘关闭');
});

input.focus(); // 触发虚拟键盘