当前位置：首页 > JavaScript

js 实现键盘输入

2026-03-01 07:07:05JavaScript

监听键盘事件

使用addEventListener监听键盘事件，可捕获用户按键动作。常用事件类型包括keydown（按键按下）、keyup（按键释放）和keypress（字符输入）。

document.addEventListener('keydown', (event) => {
  console.log('按键代码:', event.keyCode);
  console.log('按键名称:', event.key);
});

获取按键信息

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

event.key：返回按键的字符串表示（如"Enter"、"A"）。
event.code：返回物理按键代码（如"KeyA"、"ArrowLeft"）。
event.keyCode（已废弃）：返回ASCII码值。

document.addEventListener('keyup', (event) => {
  if (event.key === 'Enter') {
    alert('回车键被按下');
  }
});

组合键检测

通过event.ctrlKey、event.shiftKey、event.altKey等属性检测组合键：

js 实现键盘输入

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

输入框实时监听

对特定输入框绑定键盘事件，实现实时反馈：

const input = document.getElementById('myInput');
input.addEventListener('input', (event) => {
  console.log('当前输入值:', event.target.value);
});

游戏控制示例

通过方向键控制游戏角色移动：

js 实现键盘输入

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

事件阻止默认行为

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

document.addEventListener('keydown', (event) => {
  if (event.key === ' ') {
    event.preventDefault();
    console.log('空格键被禁用');
  }
});

自定义快捷键系统

实现可配置的快捷键绑定：

const shortcuts = {
  'Alt+D': () => console.log('打开调试工具'),
  'Shift+?': () => alert('显示帮助')
};

document.addEventListener('keydown', (event) => {
  const combo = [
    event.altKey && 'Alt',
    event.shiftKey && 'Shift',
    event.key
  ].filter(Boolean).join('+');

  if (shortcuts[combo]) {
    shortcuts[combo]();
  }
});