按下任意键盘按键查看KeyCode
-
keyCode
-
key
-
code
-
which
-
charCode
-
location
-
Ctrl
❌
Shift
❌
Alt
❌
Meta
❌
常用按键码表
| keyCode | 按键 | key | code |
|---|
工具介绍
了解KeyCode键盘按键码工具的功能特点和使用方法
什么是KeyCode？
KeyCode（键码）是键盘事件对象的一个属性，表示按下的键盘按键的虚拟键码值。在JavaScript中，键盘事件（keydown、keyup、keypress）的事件对象包含keyCode、key、code等多个属性，用于描述用户按下的是哪个键。
键盘事件属性说明
1. keyCode：返回按键的Unicode字符码或按键的虚拟键码。注意：keyCode属性已被废弃，推荐使用key或code属性。
2. key：返回按键的标识符，如"a"、"A"、"Enter"、"Shift"等。会根据Shift等修饰键的状态而变化。
3. code：返回按键的物理键代码，如"KeyA"、"Enter"、"ShiftLeft"等。不受修饰键和键盘布局的影响，表示物理按键的位置。
4. which：与keyCode类似，返回按键的键码值，用于兼容不同浏览器。同样已被废弃。
5. charCode：仅在keypress事件中有效，返回输入字符的Unicode值。已被废弃。
6. location：返回按键在键盘上的位置，0表示标准位置，1表示左侧，2表示右侧，3表示数字小键盘。
功能特点
- 实时检测：按下任意键盘按键即可实时显示该按键的所有相关信息。
- 全面信息：显示keyCode、key、code、which、charCode、location等所有键盘事件属性。
- 修饰键状态：实时显示Ctrl、Shift、Alt、Meta等修饰键的按下状态。
- 按键码表：提供常用按键的码表查询，方便快速查找。
- 搜索功能：支持通过按键名或keyCode搜索码表，快速定位。
应用场景
1. 前端开发：在开发键盘快捷键、游戏控制等功能时，需要知道各个按键的keyCode值。
注意事项
1. keyCode已废弃：keyCode和which属性已被Web标准废弃，虽然大多数浏览器仍支持，但新代码建议使用key和code属性。
2. 浏览器差异：不同浏览器对键盘事件的实现可能有差异，开发时需要注意兼容性。
3. 键盘布局：key属性的值可能受键盘布局影响，而code属性表示物理键位，不受布局影响。
常见问题
关于KeyCode键盘按键码工具的常见问题解答
keyCode、key、code有什么区别？
keyCode是数字型的虚拟键码，已废弃；key是按键的字符表示，如"a"、"Enter"，会受修饰键影响；code是物理键位代码，如"KeyA"、"ShiftLeft"，不受修饰键和键盘布局影响。推荐使用code来判断物理按键，使用key来获取输入的字符。
为什么keyCode不推荐使用了？
keyCode已被Web标准废弃，主要原因有：1) keyCode在不同浏览器和操作系统上的实现不一致，存在兼容性问题；2) keyCode无法区分同一按键的左右位置（如左Shift和右Shift）；3) keyCode受键盘布局影响，不同语言布局的键盘可能有不同的keyCode。推荐使用更标准的key和code属性。
为什么有些按键检测不到？
有些系统级的快捷键或浏览器内置的快捷键可能无法被JavaScript捕获，例如：1) Windows的Win键（Meta键）可能部分被系统拦截；2) 浏览器的快捷键如Ctrl+T、Ctrl+W等；3) 一些特殊的功能键可能因浏览器安全限制而无法获取完整信息。但大多数普通按键都可以正常检测。
keydown、keypress、keyup有什么区别？
keydown：按键按下时触发，所有按键都会触发，包括功能键；keypress：按键按下并产生字符时触发，只有可打印字符会触发，已废弃；keyup：按键释放时触发。本工具使用keydown事件来检测按键，因为它能捕获所有按键。
如何在代码中判断用户按下了回车键？
推荐使用key属性判断：if (event.key === 'Enter') { ... }。也可以用code属性：if (event.code === 'Enter') { ... }。虽然很多人用keyCode === 13来判断，但keyCode已废弃，不建议在新代码中使用。