如何监听键盘按键

本文将梳理一遍在 js 中如何去监听键盘按键。

# 监听键盘按键

在 js 中，可以使用 addEventListener 方法来监听键盘按键。具体用法如下：

document.addEventListener('keydown', function (event) {
  // 在这里编写按键被按下的逻辑
})

在上述代码中，keydown 是一个事件类型，表示监听键盘按键事件。当用户按下键盘上的按键时，会触发该事件，并在事件处理函数中执行相应的逻辑。

要获取用户按下的按键，可以使用事件对象的 key 属性。该属性会返回一个字符串，表示用户按下的按键。例如，如果用户按下了 A 键，key 属性的值将会是 "A"。

# ASCII 编码

若是依据 event.key 属性值来监听键盘的各种按键，无需对各个按键来一次判断，因为 event.key 属性值会返回对应按键的 ASCII (RFC 20open in new window) 编码值。

其中数字 0-9 的 ASCII 编码值分别为 48-57，大写字母 A-Z 的 ASCII 编码值分别为 65-90，小写字母 a-z 的 ASCII 编码值分别为 97-122。

在 event 对象中 keycode 表示按键的 ASCII 编码，由此可以得到第一个按键监听处理函数:

/** 按键监听器函数 */
function listenForKeyPress(callback) {
  // 监听 keydown 事件
  document.addEventListener('keydown', function (event) {
    // 获取按键代码
    const keyCode = event.keyCode

    // 检查是否是 a-z 、A-Z 和 0-9
    const isLetter =
      (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90)
    const isNumber = keyCode >= 48 && keyCode <= 57

    // 如果是符合条件的按键，调用回调函数
    if (isLetter || isNumber) {
      callback(event)
    }
  })
}

// 使用示例
listenForKeyPress(function (event) {
  console.log(`🚀 ~ You pressed: ${event.key}`)
})

# 被淘汰的KeyboardEvent.keyCode

值得注意的是 KeyboardEvent.keyCode 属性已经被废弃了，但是目前主流浏览器目前仍旧可以使用该属性来监听键盘按键。因此可转用 KeyboardEvent.key 或者 KeyboardEvent.code 来检测按键。它们三者的区别如下:

1. KeyboardEvent.keyCodeopen in new window:
   • 类型: 数字
   • 内容: 表示物理按键的数字代码
   • 特点: 已被废弃，不推荐使用，因为它在不同浏览器和键盘布局中不一致。
2. KeyboardEvent.key:
   • 类型: 字符串
   • 内容: 表示按键的值，和用户按下的键相关。比如，按下 a 键时，返回 "a"，按下 Shift + a 时，返回 "A"。
   • 特点: 区分大小写，反映用户输入的字符，支持不同的键盘布局。
3. KeyboardEvent.code:
   • 类型: 字符串
   • 内容: 表示物理按键的位置。例如，QWERTY 布局键盘上的 “q” 键返回的 code 是 “KeyQ” ，但 Dvorak 键盘上的“'” 键和 AZERTY 键盘上的“a”键也返回的相同 code 值。
   • 特点: 稳定性不如KeyboardEvent.key。

因此目前，最为稳妥的是采用 KeyboardEvent.key 用字符串去监听按键事件。

1. 方式一：直接定义所有有效按键。

   // 直接定义所有有效按键
   const validKeys =
     'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
   
   const key = event.key
   
   // 检查按键是否在有效按键集合中
   if (validKeys.includes(key)) {
     console.log(`🚀 ~ You pressed: ${key}`)
   }
   

2. 方式二：用正则检测字符。

   // 按键监听器函数
   function listenForKeyPress(callback) {
     // 监听 keydown 事件
     document.addEventListener('keydown', function (event) {
       // 获取按键值
       const key = event.key
   
       // 检查是否是 A-Z a-z 或 0-9
       const isLetter = /^[A-Za-z]$/.test(key)
       const isNumber = /^[0-9]$/.test(key)
   
       // 如果是符合条件的按键，调用回调函数
       if (isLetter || isNumber) {
         callback(event)
       }
     })
   }
   
   // 使用示例
   listenForKeyPress(function (event) {
     console.log(`🚀 ~ You pressed: ${event.key}`)
   })