当前位置：首页 > JavaScript

js 实现按键

2026-04-06 00:28:41JavaScript

监听键盘事件

使用 addEventListener 监听键盘事件，支持 keydown、keyup 和 keypress 三种类型：

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

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

获取按键信息

通过事件对象 event 可以获取按键详细信息：

document.addEventListener('keydown', function(event) {
  console.log('按键代码:', event.keyCode || event.which);
  console.log('按键名称:', event.key);
  console.log('组合键状态:', {
    ctrl: event.ctrlKey,
    alt: event.altKey,
    shift: event.shiftKey,
    meta: event.metaKey
  });
});

阻止默认行为

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

js 实现按键

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

实现快捷键组合

检测组合键操作示例：

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

游戏控制示例

实现方向键控制游戏角色的基础代码：

js 实现按键

const player = { x: 0, y: 0 };

document.addEventListener('keydown', function(event) {
  const speed = 5;
  switch(event.key) {
    case 'ArrowUp': player.y -= speed; break;
    case 'ArrowDown': player.y += speed; break;
    case 'ArrowLeft': player.x -= speed; break;
    case 'ArrowRight': player.x += speed; break;
  }
  console.log('玩家位置:', player);
});

输入框特殊处理

针对 <input> 元素的按键处理需要额外注意焦点问题：

const inputField = document.querySelector('input');
inputField.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    console.log('输入内容:', this.value);
  }
});

移动端虚拟键盘

移动设备需要额外处理虚拟键盘事件：

window.addEventListener('resize', function() {
  if (window.innerHeight < window.outerHeight * 0.8) {
    console.log('虚拟键盘弹出');
  } else {
    console.log('虚拟键盘收起');
  }
});