根据MDN,我们绝对不应该使用. keycode属性。已弃用:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

在W3学校,这个事实被淡化了,只有一个边注说。keycode只是为了兼容性而提供的,最新版本的DOM事件规范建议使用.key属性。

问题是浏览器不支持.key,那么我们应该使用什么呢?我遗漏了什么吗?


当前回答

你可以使用

parseInt(event.key, radix: 10)

其他回答

这里建议使用key value而不是keyCode,如果失败,则使用keyCode。但是这还不够,因为这个属性中的值是不兼容的。事情是new key包含控制键的字符串,比如: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);
});

如果需要不可打印的控制字符,则必须相应地更新条件和正则表达式。

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

e.charCode已弃用:

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

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

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

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

你可以使用

parseInt(event.key, radix: 10)