KeyboardEvent。键码弃用。这在实践中意味着什么?

TLDR:我建议你使用新的事件。键和事件。代码属性而不是遗留属性。IE和Edge支持这些属性，但还不支持新的键名。对于它们，有一个小的填充，使它们输出标准的键/代码名称:

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的原因之后，让我们看看今天需要做什么:

All modern browsers support the new properties (key and code). IE and Edge support an older version of the spec, which has different names for some keys. You can use a shim for it: https://github.com/shvaikalesh/shim-keyboard-event-key (or roll your own - it's rather small anyways) Edge has fixed this bug in the latest release (probably will be released in Apr 2018) - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/ Refer to the list of event keys you can use: https://www.w3.org/TR/uievents-key/

2018-04-18 15:03:02

e.charCode已弃用:

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

你应该用现在:e。键=== 'Enter'

2021-08-28 23:56:29

你有三种方法来处理它，因为它写在你分享的链接上。

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

2016-02-14 17:59:03

TLDR:我建议你使用新的事件。键和事件。代码属性而不是遗留属性。IE和Edge支持这些属性，但还不支持新的键名。对于它们，有一个小的填充，使它们输出标准的键/代码名称:

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的原因之后，让我们看看今天需要做什么:

All modern browsers support the new properties (key and code). IE and Edge support an older version of the spec, which has different names for some keys. You can use a shim for it: https://github.com/shvaikalesh/shim-keyboard-event-key (or roll your own - it's rather small anyways) Edge has fixed this bug in the latest release (probably will be released in Apr 2018) - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/ Refer to the list of event keys you can use: https://www.w3.org/TR/uievents-key/

2018-04-18 15:03:02

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

而不是

event.keyCode === 13

像这样做

event.key === 'Enter'

2020-01-23 14:17:13

使用onkeypress和onkeydown事件。,它是开关[字符码]或[键码]

function myKey(event){ var keycode = event.keyCode; //key code variant 1, not recomendate var keywhic = event.which; //key code variant 2, nice worked var unicode = event.key; //string name code, nice worked var chacode = event.charCode; //works onkeypress="myKey(event)" var metakey = event.metaKey; //true false, winKey or macComand document.getElementById("demo").innerHTML = keycode+" "+keywhic+" "+unicode+" "+chacode+" "+metakey; } <!DOCTYPE html> <html> <body onkeydown="myKey(event)">  <h1 id="demo">Keyboard Buttons click me and test the keyboard</h1> <script> //function myKey(event){ //paste code //} </script> </body> </html>

2022-08-21 04:45:59

KeyboardEvent。键码弃用。这在实践中意味着什么?

推荐文章

最新文章

标签