KeyboardEvent.keyCode已过时。实际上这是什么意思？

Question

根据MDN，我们绝对应该not使用.keyCode属性。不推荐使用：

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

在W3学校中，这个事实被淡化了，只有一个旁注指出.keyCode仅出于兼容性目的而提供，而最新版本的DOM Events Specification建议使用.key属性。

问题是浏览器不支持.key，所以我们应该使用什么？有什么我想念的吗？

Answer 1

您有三种处理方式，因为它写在您共享的链接上。

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 2

除了keyCode，which，charCode和keyIdentifier均已弃用：charCode和keyIdentifier是非标准功能。keyIdentifier已从Chrome 54和Opera 41.0开始删除keyCode在按键事件上返回0，且FF上包含正常字符。

The key property：

 readonly attribute DOMString key

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

截至撰写本文时，key属性受以下所有主要浏览器支持：Firefox 52，Chrome 55，Safari 10.1，Opera46。InternetExplorer 11除外：非标准键标识符和AltGraph的不正确行为。 More info如果这很重要和/或向后兼容，则可以使用功能检测，如以下代码所示：

注意，key值与keyCode或which属性不同，因为：它包含键名而不是其代码。如果程序需要字符代码，则可以使用charCodeAt()。对于单个可打印字符，如果要处理其值包含多个字符的键，例如ArrowUp，则可以使用charCodeAt()机会是：您正在测试特殊键并采取相应措施。因此，请尝试实现一个键值及其对应表代码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 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在平台之间甚至在不同操作系统或使用不同本地化的相同实现中都是[[inconsistent。

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

这些功能从未正式指定，当前的浏览器实现方式有很大不同。依赖于检测用户代理并采取相应行动的大量遗留内容（包括脚本库）意味着，将这些遗留属性和事件形式化的任何尝试都将可能破坏其将要修复或启用的内容。此外，

这些属性不适合国际使用，也不能解决可访问性问题。

因此，在确定了替换旧的keyCode的原因之后，让我们看看您今天需要做什么：

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

Answer 4

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);