键盘：keydown 和 keyup

莫凡是莫烦
310 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情

在我们开始学习键盘的相关内容之前，请注意，在现代设备上，还有其他“输入内容”的方法。例如，人们使用语音识别（尤其是在移动端设备上）或用鼠标复制/粘贴。

因此，如果我们想要跟踪 <input> 字段中的所有输入，那么键盘事件是不够的。无论如何，还需要一个名为 input 的事件来跟踪 <input> 字段中的更改。对于这样的任务来说，这可能是一个更好的选择。稍后我们将在 事件：change，input，cut，copy，paste 一章中介绍它们。

当我们想要处理键盘行为时，应该使用键盘事件（虚拟键盘也算）。例如，对方向键 Up 和 Down 或热键（包括按键的组合）作出反应。

测试台

为了更好地理解键盘事件，你可以使用下面这个测试台。

在文本区域中尝试使用不同的组合键。

结果

script.js

style.css

index.html

Keydown 和 keyup

当一个按键被按下时，会触发 keydown 事件，而当按键被释放时，会触发 keyup 事件。

event.code 和 event.key

事件对象的 key 属性允许获取字符，而事件对象的 code 属性则允许获取“物理按键代码”。

例如，同一个按键 Z，可以与或不与 Shift 一起按下。我们会得到两个不同的字符：小写的 z 和大写的 Z。

event.key 正是这个字符，并且它将是不同的。但是，event.code 是相同的：

Keyevent.keyevent.code
Zz（小写）KeyZ
Shift+ZZ（大写）KeyZ

如果用户使用不同的语言，那么切换到另一种语言将产生完全不同的字符，而不是 "Z"。它将成为 event.key 的值，而 event.code 则始终都是一样的："KeyZ"。

“KeyZ” 和其他按键代码

每个按键的代码都取决于该按键在键盘上的位置。UI 事件代码规范 中描述了按键代码。

例如：

  • 字符键的代码为 "Key<letter>"："KeyA"，"KeyB" 等。
  • 数字键的代码为："Digit<number>"："Digit0"，"Digit1" 等。
  • 特殊按键的代码为按键的名字："Enter"，"Backspace"，"Tab" 等。

有几种广泛应用的键盘布局，该规范给出了每种布局的按键代码。

有关更多按键代码，请参见 规范的字母数字部分，或者只需在上面的 测试台 中按下一个按键。

大小写敏感："KeyZ"，不是 "keyZ"

这是显而易见的，但人们仍会搞错。

请规避错误类型：它是 KeyZ，而不是 keyZ。像 event.code=="keyZ" 这样的检查不起作用："Key" 的首字母必须大写。

如果按键没有给出任何字符呢？例如，Shift 或 F1 或其他。对于这些按键，它们的 event.key 与 event.code 大致相同：

Keyevent.keyevent.code
F1F1F1
BackspaceBackspaceBackspace
ShiftShiftShiftRight 或 ShiftLeft

请注意，event.code 准确地标明了哪个键被按下了。例如，大多数键盘有两个 Shift 键，一个在左边，一个在右边。event.code 会准确地告诉我们按下了哪个键，而 event.key 对按键的“含义”负责：它是什么（一个 “Shift”）。

假设，我们要处理一个热键：Ctrl+Z（或 Mac 上的 Cmd+Z）。大多数文本编辑器将“撤销”行为挂在其上。我们可以在 keydown 上设置一个监听器，并检查哪个键被按下了。

这里有个难题：在这样的监听器中，我们应该检查 event.key 的值还是 event.code 的值？

一方面，event.key 的值是一个字符，它随语言而改变。如果访问者在 OS 中使用多种语言，并在它们之间进行切换，那么相同的按键将给出不同的字符。因此检查 event.code 会更好，因为它总是相同的。

像这样：

document.addEventListener('keydown', function(event) {
  if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {
    alert('Undo!')
  }
});

另一方面，event.code 有一个问题。对于不同的键盘布局，相同的按键可能会具有不同的字符。

例如，下面是美式布局（“QWERTY”）和德式布局（“QWERTZ”）—— 来自 Wikipedia：

对于同一个按键，美式布局为 “Z”，而德式布局为 “Y”（字母被替换了）。

从字面上看，对于使用德式布局键盘的人来说，但他们按下 Y 时，event.code 将等于 KeyZ。

如果我们在代码中检查 event.code == 'KeyZ'，那么对于使用德式布局键盘的人来说，当他们按下 Y 时，这个测试就通过了。

听起来确实很怪，但事实确实如此。规范 中明确提到了这种行为。

因此，event.code 可能由于意外的键盘布局而与错误的字符进行了匹配。不同键盘布局中的相同字母可能会映射到不同的物理键，从而导致了它们有不同的代码。幸运的是，这种情况只发生在几个代码上，例如 keyA，keyQ，keyZ（我们已经看到了），而对于诸如 Shift 这样的特殊按键没有发生这种情况。你可以在 规范 中找到该列表。

为了可靠地跟踪与受键盘布局影响的字符，使用 event.key 可能是一个更好的方式。

另一方面，event.code 的好处是，绑定到物理键位置的 event.code 会始终保持不变。因此，即使在切换了语言的情况下，依赖于它的热键也能正常工作。

我们想要处理与布局有关的按键？那么 event.key 是我们必选的方式。

或者我们希望一个热键即使在切换了语言后，仍能正常使用？那么 event.code 可能会更好。

自动重复

如果按下一个键足够长的时间，它就会开始“自动重复”：keydown 会被一次又一次地触发，然后当按键被释放时，我们最终会得到 keyup。因此，有很多 keydown 却只有一个 keyup 是很正常的。

对于由自动重复触发的事件，event 对象的 event.repeat 属性被设置为 true。

avatar
文章
阅读
粉丝