为什么现在不推荐用 keyCode 判断按键?
同一个物理键在不同键盘布局上会产出不同的字符、相同的键位;keyCode 记的是别人家浏览器当年的约定,不是标准。
直接答案
键盘事件上有三个常见字段:key 给的是这次按键产生的字符或键名,会随键盘布局与修饰键变化;code 给的是物理键位,换布局也不变;keyCode 给的是数字,已从规范中废弃。
数字这套约定来自早期浏览器,标点与非美式布局上的数值从未完全统一,同一个键在不同浏览器或系统上可能给出不同数字,所以拿数字做判断最容易在特定语言环境下失效。
选哪个看目的:想知道用户打出了什么字符,用 key;想让快捷键跟着手指位置走、不随布局漂移,用 code。两个都要,就分别判断。
键盘事件是交互里最基础的一环,也最容易留下隐患:开发机上跑得好好的快捷键,换一台法语键盘就失灵。
这一篇把三个字段的取值差异摆在一起,讲清各自的适用场景与两个高频陷阱。
1同一个键,三种取法给出什么
以按下大写状态的字母键为例,三个字段的返回值完全不同。
| 字段 | 返回值形态 | 受布局与修饰键影响 |
|---|---|---|
| key | 字符或键名,如小写字母、方向键名称 | 受影响,反映最终产生的字符 |
| code | 物理键位名,如字母键位、数字键位 | 不受影响,只反映位置 |
| keyCode | 数字 | 不受影响,但数值无标准保证 |
判断按键是不是字母,用 key 更直接;判断玩家有没有按到移动键位,用 code 才稳。
2三种需求对应三种选法
把需求写成一句话,选法基本就定了。
| 需求 | 该用 | 理由 |
|---|---|---|
| 输入框里识别回车提交 | key | 关心的是产生的字符与键名 |
| 游戏移动键位 | code | 换键盘布局后手指位置不变 |
| 按住修饰键组合成快捷键 | key 加修饰键布尔值 | 组合语义由字符决定 |
| 区分左右两侧的修饰键 | code 或位置字段 | key 无法区分左右 |
要兼容很老的浏览器才需要数字方案,新项目没有理由再引入它。
3两个高频陷阱
一个关于输入法,一个关于按住不放。
- 中文输入法组合态
- 输入法组字过程中按键事件的字符字段会给出特定状态值,此时不应触发快捷键,否则打字会误触
- 长按重复触发
- 按住不放会连续触发按键事件,事件里带重复标记,写移动逻辑时要据此忽略后续事件
- 大小写与修饰键
- 大写锁定与按下修饰键都会改变字符,判断字母时要注意同时接受大小写
- 不要用数字做映射表
- 一旦必须用数字,也要在表里注明来源与适用范围,并补上字符分支
输入法组字期间误触发快捷键,是中文场景下最常见的交互缺陷。
相关疑问
老代码里全是数字判断,要不要改?
不影响功能就先不动,但新增逻辑一律用字符或键位判断,避免继续扩散这套无标准的数值。
为什么同一个键在不同浏览器上数字不一样?
这套数值从来不是标准的一部分,标点与特殊键上各家取值存在差异,所以它不可靠。
判断按下的是哪个字母,用哪个?
用字符字段,并同时接受大小写两种取值,或者先统一转换大小写再比较。
左右两侧的修饰键怎么区分?
字符字段分不出来,需要看键位字段或位置字段,右侧与左侧的取值不同。
继续看:相关问题与资料
全部问题解答 →
内容标识:本页内容由人工智能辅助生成,并经人工核对与编辑。详见 人工智能生成内容标识说明。
内容说明:本页针对具体使用问题作答,方法步骤与数值由本站自行整理与复算,事实性内容以对应官方规范与文档为准。内容最后核对日期:2026-10-12。若发现错误,欢迎通过页脚反馈入口告知。
内容说明:本页针对具体使用问题作答,方法步骤与数值由本站自行整理与复算,事实性内容以对应官方规范与文档为准。内容最后核对日期:2026-10-12。若发现错误,欢迎通过页脚反馈入口告知。
速查在线工具箱