KeyboardEvent 对象的 keyCode 属性已被弃用

什么是 KeyboardEvent ?

KeyboardEvent对象描述了用户与键盘的交互。 每个事件都描述了用户与一个按键(或一个按键和修饰键的组合)的单个交互;事件类型keydownkeypresskeyup用于识别不同的键盘活动类型。

传送门:KeyboardEvent - Web API 接口参考 | MDN

什么是 keyCode 属性 ?

这个只读的属性KeyboardEvent.keyCode代表着一个唯一标识的所按下的键的未修改值,它依据于一个系统和实现相关的数字代码。这通常是与密钥对应的二进制的ASCII (RFC 20) 或 Windows 1252 码。如果这个键不能被标志,这个值为 0 。

该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

传送门:KeyboardEvent.keyCode - Web API 接口参考 | MDN

使用 key 属性替代 keyCode 属性

什么是 key 属性?

只读属性KeyboardEvent.key返回用户按下的物理按键的值。

传送门:KeyboardEvent.key - Web API 接口参考 | MDN

解决方案

我们以最常见使用 keyCode 属性,监听“回车 (Enter) 按键” 来举例。

原始方案:

  1. <Button
  2. onKeyDown={(event) => {
  3. if (event.keyCode === 13) {
  4. // 阻止默认的回车事件执行
  5. event.preventDefault();
  6. }
  7. }}
  8. >
  9. 我是一个按钮
  10. </Button>

升级,改造方案:

  1. <Button
  2. onKeyDown={(event) => {
  3. const { key, keyCode } = event;
  4. let handled = false;
  5. if (key !== undefined && key === 'Enter') {
  6. handled = true;
  7. } else if (keyCode !== undefined && keyCode === 13) {
  8. handled = true;
  9. }
  10. if (handled) {
  11. // 阻止默认的回车事件执行
  12. event.preventDefault();
  13. }
  14. }}
  15. >
  16. 我是一个按钮
  17. </Button>

(完)