根据MDN,我们绝对不应该使用. keycode属性。已弃用:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
在W3学校,这个事实被淡化了,只有一个边注说。keycode只是为了兼容性而提供的,最新版本的DOM事件规范建议使用.key属性。
问题是浏览器不支持.key,那么我们应该使用什么呢?我遗漏了什么吗?
根据MDN,我们绝对不应该使用. keycode属性。已弃用:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
在W3学校,这个事实被淡化了,只有一个边注说。keycode只是为了兼容性而提供的,最新版本的DOM事件规范建议使用.key属性。
问题是浏览器不支持.key,那么我们应该使用什么呢?我遗漏了什么吗?
当前回答
e.charCode已弃用:
<input
onChange={(e) => setToken(e.target.value)}
type="text"
value={token}
onKeyPress={(e) => {
if (e.charCode === 13) {
verifyLoginF()
}
}}
/>
你应该用现在:e。键=== 'Enter'
其他回答
e.charCode已弃用:
<input
onChange={(e) => setToken(e.target.value)}
type="text"
value={token}
onKeyPress={(e) => {
if (e.charCode === 13) {
verifyLoginF()
}
}}
/>
你应该用现在:e。键=== 'Enter'
此外,所有的keyCode, which, charCode和keyIdentifier都已弃用: charCode和keyIdentifier是非标准特性。 keyIdentifier在Chrome 54和Opera 41.0版本被移除 在FF上正常字符的按键事件上,keyCode返回0。
键属性:
readonly attribute DOMString key
保存与所按键对应的键属性值
在撰写本文时,所有主要浏览器都支持key属性:Firefox 52、Chrome 55、Safari 10.1、Opera 46。除了Internet Explorer 11,它有: 不标准的键标识符和错误的行为与AltGraph。更多信息 如果这很重要,或者向后兼容性很重要,那么你可以像下面的代码一样使用特性检测:
Notice that the keyvalue is different from keyCode or which properties in that : it contains the name of the key not its code. If your program needs characters' codes then you can make use of charCodeAt(). For single printable characters you can use charCodeAt(), if you're dealing with keys whose values contains multiple characters like ArrowUp chances are : you are testing for special keys and take actions accordingly. So try implementing a table of keys' values and their corresponding codes charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13,charCodeArr[Escape]=27... and so on, please take a look at Key Values and their 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。代码属性文档和更多细节。
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);
你可以使用
parseInt(event.key, radix: 10)
例如,如果你想检测“Enter”键是否被点击:
而不是
event.keyCode === 13
像这样做
event.key === 'Enter'