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

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

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

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

键属性:

 readonly attribute DOMString key

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

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属性文档和此回答中的更多细节。

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

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

我在搜索与op相同的MDN警告的原因时遇到了这个问题。在进一步搜索后，keyCode的问题变得更加清晰:

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

如果你阅读W3C规范: https://www.w3.org/TR/uievents/#interface-keyboardevent < / p >

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

这些特性从未被正式指定过，目前的浏览器实现存在很大差异。大量的遗留内容(包括脚本库)依赖于检测用户代理并据此进行操作，这意味着任何形式化这些遗留属性和事件的尝试都有可能破坏它所修复或启用的内容。此外,这些属性不适合国际使用，也不能解决可访问性问题。

因此，在确定了替换遗留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/

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

而不是

event.keyCode === 13

像这样做

event.key === 'Enter'

你可以使用

parseInt(event.key, radix: 10)

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

和

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

最好用第二个。

这里建议使用关键值而不是键码，如果失败，则使用键码。但是这还不够，因为这个属性中的值是不兼容的。事情是新的关键包含控制键的字符串，如:ArrowUp，但键码将只包含简单的代码

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.charCode已弃用:

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

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

使用onkeypress和onkeydown事件。,它 是开关[CHARACTER code]或[KEYcode]

 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)"> <!--onkeypress="myKey(event)"-->


<h1 id="demo">Keyboard Buttons click me and test the keyboard</h1>
<script>
//function myKey(event){
//paste code
//}
</script>
</body>
</html>