javascript - 事件已弃用的 KeyboardEvent.which 属性的替代方案

Question

MDN 声明 KeyboardEvent.which 已弃用。如何将其替换为未弃用的版本？
例如，我有以下内容:

window.onkeydown = (event) => { console.log(event.which); }

我以为 event.key.charCodeAt()可以代替 event.which , 但这不适用于 ALT、CTRL 或 ENTER 等键，并且仅适用于 event.key.length === 1 :

window.onkeydown = (event) => { console.log(event.key.charCodeAt()); }

回顾一下， event.which != event.code和 event.which != event.key ，因此我无法简单地使用 event.key . event.which 有替代品吗？哪个检测组合按键，包括 ALT、CTRL 或 ENTER？

Answer 1

TL;DR:这些是您应该遵循的规则:

从用户获取文本输入时，使用 keypress事件以及 e.key

对于快捷方式和其他组合，内置方式是使用keydown/keyup并检查各种修饰键。如果需要检测和弦，可能需要构建状态机。

背景

键盘输入分为两个阶段 - keydown/keyup 对，它跟踪被按下的物理键，以及组合多个键序列以计算字符的组合字符。

获取“文本”

如果你想知道操作系统认为组合序列是什么，你应该使用 KeyboardEvent.key

示例代码:

document.getElementById('a').addEventListener('keypress', e => console.log(e.key));

<input id="a" type="text" placeholder="type here">

您大部分时间都想这样做的原因是因为许多语言通过多个按键组合字符。 US-101 键盘最容易理解的是按 shift键 + a是 A ，与仅按 a 相比.对于像俄语这样的语言，使用 altgr死键，这变得尤为重要。

我要说明的一点是，自己完成所有这些工作 - 检测键序列并确定正确的文本输出是一个难题™。这是操作系统的工作是有原因的。

现在，对于较旧的浏览器，您可能不想使用 e.key由于缺乏老年人的支持。然后你可以回退到 which 之类的东西。 ，或其他非标准方法。

在 future 的某个时候，按键可能会被浏览器删除。 beforeinput事件应该是替换。然而，那次事件
仅在 chrome 中受支持，因此为简洁起见，我在此省略。

获取击键

现在，假设您不是在跟踪文本，而是在跟踪键序列。这适用于游戏或收听 ctrl-c在这种情况下，正确的做法是收听 keydown/ keyup events .对于修饰键，您只需收听 ctrlKey , shiftKey , 和 metaKey事件的属性。见下文:

document.getElementById('a').addEventListener('keydown', (e) => {
  const states = {
    alt: e.altKey,
    ctrl: e.ctrlKey,
    meta: e.metaKey,
    shift: e.shiftKey,
  };
  const key = e.key;
  const code = e.code;
  console.log(`keydown key: ${key}, code: ${code}`, states);
});

<input id="a" type="text" placeholder="press ctrl">

例如，在我的键盘上按 shift-o 时，我得到以下信息:

keydown key: Shift, code: ShiftLeft {
  "alt": false,
  "ctrl": false,
  "meta": false,
  "shift": true
}
keydown key: O, code: KeyS {
  "alt": false,
  "ctrl": false,
  "meta": false,
  "shift": true
}

希望 states部分是不言而喻的。他们说在另一个键按下时是否按下了修改键。
key 之间的区别和 code与键盘布局有关。我正在使用软件 dvorak 布局。因此，当我输入 s键，进入操作系统的扫描码显示 s , 但随后操作系统将其转换为 o因为它是德沃夏克。在这种情况下，代码总是指扫描代码(被按下的物理键)，而键对应于操作系统尽力找出“文本”将是什么。这并不总是可能的，尤其是对于其他语言。这也是为什么使用 keypress 的 key 的原因。是正确的方法。

第 3 方库

如果这听起来不是特别容易，那是因为它不是。上次我看这个时，我遇到了 mousetrap图书馆，虽然我不确定我会推荐它，但考虑到我发现的一些问题。然而，它确实展示了一个构建状态机来跟踪关键和弦的示例。

附录

这也是为什么您需要跟踪 keydown/ keyup如果你想吃击键。由于 ctrl+c 没有“文本”，因此您将无法获得正确的按键，因此浏览器将 native 处理它。如果你想运行你自己的行为，你需要 e.preventDefault()在 keydown 本身上。 (一些后续事件，如 copy 也可以取消，但并非普遍如此)

如果您还只需要跟踪事后插入到输入字段(或内容可编辑的 div)中的键，请参阅 input事件。

历史:
更新 8/2019 以更改 keypress->beforeinput