Javascript KeyboardEvent.keyCode已弃用。这在实践中意味着什么？

根据MDN，我们应该最明确地不要使用

.keyCode

属性。不推荐使用：

在W3学校，这一事实被淡化了，只有一条旁注说，

.keyCode

仅用于兼容性，最新版本的DOM事件规范建议改用

.key

属性

---

问题是浏览器不支持

.key

，那么我们应该使用什么呢？我有什么遗漏吗？

MDN已经提供了一个解决方案：

---

您有三种方法来处理它，正如您共享的链接上所写的那样

if（event.key！==未定义）{
}else if（event.keyIdentifier！==未定义）{
}else if（event.keyCode！==未定义）{
}

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

如果您实现这样的东西，可能会更容易

var dispatchForCode=函数（事件、回调）{
var代码；
如果（event.key！==未定义）{
代码=event.key；
}else if（event.keyIdentifier！==未定义）{
代码=event.keyIdentifier；
}else if（event.keyCode！==未定义）{
代码=event.keyCode；
}
回调（代码）；
};

此外，所有和都已弃用：

charCode

和

keyIdentifier

是非标准功能。
自Chrome 54和Opera 41.0起，

keyIdentifier

被删除

keyCode

在按键事件时返回0，FF上使用普通字符

:

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

在撰写本文时，从Firefox 52、Chrome 55、Safari 10.1、Opera 46开始，所有主要浏览器都支持

键

属性。Internet Explorer 11除外，它具有： 非标准密钥标识符和AltGraph的错误行为
如果这一点很重要，并且/或者向后兼容性很重要，那么您可以在以下代码中使用功能检测：

请注意，

key

值与

keyCode

或

的属性不同，因为它包含键的名称，而不是其代码。如果程序需要字符代码，则可以使用
charCodeAt（）
。
对于单个可打印字符，如果要处理其值包含多个字符（如ArrowUp）的键，则可以使用
charCodeAt（）
机会是：您正在测试特殊密钥，并采取相应的措施。因此，请尝试实现一个键值表及其对应的
代码
charCodeArr[“ArrowUp”]=38
，
charCodeArr[“Enter”]=13
，
charCodeArr[Escape]=27
。。。等等，请看一下他们的

可能是要考虑前向兼容性，即在可用时使用遗留属性，并且只有当掉落切换到新的属性时：
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
属性以及其中的一些详细信息。
TLDR：我建议您应该使用新的
event.key
和
event.code
属性，而不是旧属性。IE和Edge支持这些属性，但还不支持新的密钥名称。对于它们，有一个小的多边形填充，使它们输出标准的键/代码名：



我在搜索与OP相同的MDN警告的原因时遇到了这个问题。在搜索了更多的原因后，
keyCode
的问题变得更加清楚：

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

如果您阅读了W3C规范：

实际上，keyCode和charCode在不同的平台上，甚至在不同的操作系统上或使用不同的本地化时，都是不一致的

它深入描述了
keyCode
的错误：

这些功能从未被正式指定，当前的浏览器实现在很大程度上存在差异。大量传统内容（包括脚本库）依赖于检测用户代理并相应地采取行动，这意味着任何形式化这些传统属性和事件的尝试都有可能破坏修复或启用的内容。此外，这些属性不适合国际使用，也不能解决可访问性问题。

因此，在确定旧密钥代码被替换的原因之后，让我们看看您今天需要做什么：

所有现代浏览器都支持新属性（
key
和
code
）
IE和Edge支持旧版本的规范，其中某些键的名称不同。你可以用一个垫片：（或者你自己滚——反正它很小）
Edge已在最新版本中修复了此缺陷（可能将于2018年4月发布）——
请参阅可使用的事件键列表：
例如，如果要检测是否单击了“回车”键：

而不是

event.keyCode===13

喜欢吗

event.key==='Enter'
您可以使用

parseInt(event.key, radix: 10)

与

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

最好使用第二个。
这里建议使用键值而不是键码，如果失败，则使用键码。但这还不够，因为此属性中的值不兼容。Things is newkey包含控件键的字符串，如：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);
});

如果你需要非-
(e)=>{
  e.key === 'Escape';
}

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

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