不推荐使用 KeyboardEvent.keyCode。这在实践中意味着什么？

Question

根据 MDN，我们绝对应该不使用.keyCode 属性。已弃用：

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

在 W3 学校，这一事实被淡化了，只有一个旁注说 .keyCode 仅用于兼容性，最新版本的 DOM 事件规范建议使用 .key 属性。

问题是浏览器不支持.key，那么我们应该使用什么呢？我有什么遗漏吗？

Answer 1

例如，如果您想检测“Enter”键是否被点击：

代替

event.keyCode === 13

这样做

event.key === 'Enter'

Answer 2

您可以通过三种方式来处理它，因为它写在您共享的链接上。

if (event.key !== undefined) {

} else if (event.keyIdentifier !== undefined) {

} else if (event.keyCode !== undefined) {

}

你应该考虑它们，如果你想要跨浏览器支持，这是正确的方法。

如果你实现这样的东西可能会更容易。

var dispatchForCode = function(event, callback) {
  var code;

  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }

  callback(code);
};

Answer 3

TLDR：我建议您应该使用新的event.key 和event.code 属性而不是旧属性。 IE 和 Edge 支持这些属性，但还不支持新的键名。对于他们来说，有一个小的 polyfill 可以让他们输出标准的键/代码名称：

https://github.com/shvaikalesh/shim-keyboard-event-key

---

我来这个问题是为了寻找与 OP 相同的 MDN 警告的原因。再搜索一番，keyCode 的问题就更清楚了：

使用keyCode 的问题是非英语键盘会产生不同的输出，甚至不同布局的键盘也会产生不一致的结果。另外，还有

的情况

如果您阅读 W3C 规范： https://www.w3.org/TR/uievents/#interface-keyboardevent

在实践中，keyCode 和 charCode 跨平台不一致，甚至在不同操作系统或使用不同本地化的相同实现。

它深入描述了keyCode 的问题： https://www.w3.org/TR/uievents/#legacy-key-attributes

这些功能从未被正式指定，当前的浏览器实现也有很大的不同。大量的遗留内容（包括脚本库）依赖于检测用户代理并采取相应措施，这意味着任何将这些遗留属性和事件形式化的尝试都可能会破坏尽可能多的内容，因为它会修复或启用。此外，这些属性不适合国际使用，也不能解决可访问性问题。

那么，在确定了旧版keyCode被替换的原因之后，我们来看看你今天需要做什么：

1. 所有现代浏览器都支持新属性（key 和 code）。
2. IE 和 Edge 支持旧版本的规范，它对某些键有不同的名称。您可以为此使用垫片：https://github.com/shvaikalesh/shim-keyboard-event-key（或自己滚动 - 反正它相当小）
3. Edge 已在最新版本中修复了此错误（可能会在 2018 年 4 月发布）-https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
4. 请参阅您可以使用的事件键列表：https://www.w3.org/TR/uievents-key/

Answer 4

此外，keyCode、which、charCode 和 keyIdentifier 均已弃用：
charCode 和 keyIdentifier 是非标准功能。
keyIdentifier 已删除从 Chrome 54 和 Opera 41.0 开始
keyCode 在 FF 上使用普通字符的按键事件时返回 0。

The key property：

 readonly attribute DOMString key

持有与按下的键对应的键属性值

截至撰写本文时，所有主流浏览器都支持 key 属性：Firefox 52、Chrome 55、Safari 10.1、Opera 46。除了 Internet Explorer 11，它具有： 非标准键标识符和 AltGraph 的错误行为。 More info
如果这很重要和/或向后兼容性很重要，那么您可以使用如下代码中的特征检测：

注意keyvalue 与keyCode 或which 属性的不同之处在于：它包含键的名称而不是其代码。如果您的程序需要字符代码，那么您可以使用charCodeAt()。 对于单个可打印字符，您可以使用 charCodeAt()，如果您正在处理其值包含多个字符（如 ArrowUp）的键 机会是：您正在测试特殊键并采取相应措施。所以尝试实现一个键值表及其对应的 代码charCodeArr["ArrowUp"]=38,charCodeArr["Enter"]=13,charCodeArr[Escape]=27...等等，请看Key Values和他们的corresponding codes

if(e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        /* As @Leonid suggeted   */
        var characterCode = e.which || e.charCode || e.keyCode || 0;
    }
        /* ... code making use of characterCode variable  */  

您可能想考虑前向兼容性，即在旧属性可用时使用它们，并且仅在丢弃时切换到新属性：

if(e.which || e.charCode || e.keyCode ){
        var characterCode = e.which || e.charCode || e.keyCode;
    }else if (e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        var characterCode = 0;
    }

另请参阅：KeyboardEvent.code 属性 docs 以及此 answer 中的更多详细信息。

Answer 5

MDN 已经提供了解决方案：

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }

  var handled = false;
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key and set handled true.
  } else if (event.keyIdentifier !== undefined) {
    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
  } else if (event.keyCode !== undefined) {
    // Handle the event with KeyboardEvent.keyCode and set handled true.
  }

  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
}, true);

Answer 6

e.charCode 已被弃用：

<input
  onChange={(e) => setToken(e.target.value)}
  type="text"
  value={token}
  onKeyPress={(e) => {
    if (e.charCode === 13) {
      verifyLoginF()
    }
  }}
/>

你现在应该使用：e.key === 'Enter'

Answer 7

这里建议使用 key 值而不是 keyCode，如果失败则使用 keyCode。虽然这还不够，因为此属性中的值不兼容。事情是新的 key 包含控制键的字符串，例如：ArrowUp，但 keyCode 将只包含琐碎的代码

String.fromCharCode(event.keyCode)

将导致不可打印的字符。这里是可打印字符的解决方案：

element.keydown((event) => {
    var symbolPressed;
    //cross browser
    if (event.key !== undefined) {
        symbolPressed = event.key; //Here control characters represented as String like: ArrowUp
        if (symbolPressed.length > 1) return; //filter out control characters
    } else if (event.keyCode !== undefined) {
        symbolPressed = String.fromCharCode(event.keyCode); //Here control chars represented as one char string
    }
    //Update this regex if you need other characters
    if (!symbolPressed.match(/[A-z0-9\s]/)) return;
    console.log(symbolPressed);
});

如果您需要不可打印的控制字符，您必须相应地更新条件和正则表达式。

Answer 8

(e)=>{
  e.key === 'Escape';
}

与

相同

(e)=>{
  e.keyCode === 27;
}

最好用第二个。

Answer 9

你可以使用

parseInt(event.key, radix: 10)