当前位置：首页>行业动态> 正文

按键事件 js

JavaScript通过addEventListener监听按键事件（keydown/keyup），事件处理函数接收event参数，可通过e.key/e.code获取按键值，结合条件判断

按键事件基础

JavaScript 中处理按键事件主要涉及keydown、keyup、keypress三种事件类型，现代浏览器推荐使用keydown和keyup，而keypress已逐渐被淘汰。

事件类型对比

事件类型触发时机适用场景
keydown按下按键时触发检测按键是否被按下（常用）
keyup释放按键时触发判断按键是否松开
keypress字符键被按下并产生字符时触发历史遗留，不建议使用

事件对象属性

按键事件对象(event) 包含多个关键属性：

属性名说明
key按键的显示值（如"a","ArrowUp", ）
code物理按键的唯一标识（如"KeyA","ArrowUp","Space"）
location按键位置（0: 主键盘区，1: 左侧，2: 右侧）
repeat是否为重复按键（长按触发的多次事件）
isComposing是否处于输入法组合状态（处理中文输入）
ctrlKey是否按下Ctrl键（类似shiftKey,altKey,metaKey）

监听按键事件

直接绑定事件

document.addEventListener('keydown', function(e) {
  console.log('按下的键:', e.key); // 输出按键值
  if (e.key === 'Enter') {
    console.log('回车键被按下');
  }
});

事件委托（适用于动态元素）

document.body.addEventListener('keydown', function(e) {
  if (e.target.tagName === 'INPUT' && e.key === 'Enter') {
    console.log('在输入框内按下了回车键');
  }
});

兼容性处理

  1. 区分key和code

    • 使用key获取显示值（如"a"）,但需注意大小写和语言环境。
    • 使用code获取物理按键标识（如"KeyA"），适合功能键（如"F5"）。

  2. 处理重复按键
    长按按键会触发多次keydown事件，可通过e.repeat判断是否为重复触发：

    if (!e.repeat) {
  console.log('首次按下');
}

  3. 兼容 IE11
    IE11 不支持code属性，可使用e.keyCode替代（但不推荐）：

    const keyMap = {
  65: 'a', // KeyCode 对应字母
  37: 'ArrowLeft' // KeyCode 对应方向键
};
const key = keyMap[e.keyCode] || e.key;

实际应用示例

禁用退格键（防止后退页面）

window.addEventListener('keydown', function(e) {
  if (e.key === 'Backspace') {
    e.preventDefault(); // 阻止默认行为
  }
});

快捷键组合（如Ctrl + S保存）

document.addEventListener('keydown', function(e) {
  if (e.ctrlKey && e.key === 's') {
    console.log('触发保存操作');
    e.preventDefault(); // 阻止浏览器默认保存行为
  }
});

游戏控制（方向键）

document.addEventListener('keydown', function(e) {
  switch (e.key) {
    case 'ArrowUp':
      console.log('向上移动');
      break;
    case 'ArrowDown':
      console.log('向下移动');
      break;
    // 其他方向键处理
  }
});

常见问题与解答

问题1：如何判断是否按下了Ctrl + Shift + K？

解答：通过检查event.ctrlKey、event.shiftKey和event.key：

if (e.ctrlKey && e.shiftKey && e.key === 'k') {
  console.log('触发快捷键 Ctrl+Shift+K');
}

问题2：如何处理中文输入法下的按键事件？

解答：中文输入法组合键时，e.isComposing会变为true,此时应暂停处理：

document.addEventListener('keydown', function(e) {
  if (e.isComposing) return; // 忽略输入法组合状态
  console.log('按下的键:', e.key);
});
按键事件
0

相关文章