不推荐使用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

此外,所有的键代码,其中,则charCode和keyIdentifier被弃用:
charCode和keyIdentifier是非标准的特性.
keyIdentifier从Chrome 54开始删除,Opera 41.0
keyCode在FF上使用普通字符的按键事件时返回0.

关键属性:

 readonly attribute DOMString key

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

截至撰写本文时,该key属性受到以下所有主流浏览器的支持:Firefox 52,Chrome 55,Safari 10.1,Opera 46. Internet Explorer 11除外,它具有: 非标准密钥标识符和AltGraph的错误行为.更多信息
如果这是重要的和/或向后兼容性,那么您可以使用功能检测,如下面的代码所示:

请注意,该key值与keyCode或者which属性不同:它包含键的名称而不是其代码.如果您的程序需要字符代码,那么您可以使用charCodeAt().对于可以使用的单个可打印字符charCodeAt(),如果您正在处理其值包含多个字符的键,例如ArrowUp 机会:您正在测试特殊键并采取相应的操作.因此,尝试推行键的值及其对应的代码表charCodeArr["ArrowUp"]=38,charCodeArr["Enter"]=13,charCodeArr[Escape]=27...等,请看一看核心价值及其对应的代码

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属性文档以及此答案中的更多详细信息.

Answer 3

您有三种方法可以处理它,因为它是在您共享的链接上编写的.

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 4

TLDR:我建议你应该使用new 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

这些功能从未正式指定,当前的浏览器实现方式也有很大差异.依赖于检测用户代理并相应地执行操作的大量遗留内容(包括脚本库)意味着任何将这些遗留属性和事件正式化的尝试都有可能破坏尽可能多的内容以及修复或启用的内容.此外,这些属性不适合国际使用,也不涉及可访问性问题.

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

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 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'