⭐ 觉得好用?收藏备用,下次直接打开 ✨ 开通会员去广告 · 更多权益即将开放 ☕ 支持作者
按下任意键
点这里让它获得焦点,再按键
捕获区聚焦时会拦截默认行为(Tab、空格、/ 等不会滚页或跳焦点)。 Esc 退出捕获;带 Ctrl / ⌘ 的组合键不拦截,浏览器快捷键照常可用。
常用键码对照
codekeyCode分类
A KeyA 65 字母
B KeyB 66 字母
C KeyC 67 字母
D KeyD 68 字母
E KeyE 69 字母
F KeyF 70 字母
G KeyG 71 字母
H KeyH 72 字母
I KeyI 73 字母
J KeyJ 74 字母
K KeyK 75 字母
L KeyL 76 字母
M KeyM 77 字母
N KeyN 78 字母
O KeyO 79 字母
P KeyP 80 字母
Q KeyQ 81 字母
R KeyR 82 字母
S KeyS 83 字母
T KeyT 84 字母
U KeyU 85 字母
V KeyV 86 字母
W KeyW 87 字母
X KeyX 88 字母
Y KeyY 89 字母
Z KeyZ 90 字母
0 Digit0 48 数字
1 Digit1 49 数字
2 Digit2 50 数字
3 Digit3 51 数字
4 Digit4 52 数字
5 Digit5 53 数字
6 Digit6 54 数字
7 Digit7 55 数字
8 Digit8 56 数字
9 Digit9 57 数字
Backspace Backspace 8 控制键
Tab Tab 9 控制键
Enter Enter 13 控制键
Shift ShiftLeft 16 控制键
Ctrl ControlLeft 17 控制键
Alt AltLeft 18 控制键
Pause Pause 19 控制键
CapsLock CapsLock 20 控制键
Esc Escape 27 控制键
空格 Space 32 控制键
PageUp PageUp 33 控制键
PageDown PageDown 34 控制键
End End 35 控制键
Home Home 36 控制键
ArrowLeft 37 控制键
ArrowUp 38 控制键
ArrowRight 39 控制键
ArrowDown 40 控制键
Insert Insert 45 控制键
Delete Delete 46 控制键
Meta / ⌘ / Win MetaLeft 91 控制键
ContextMenu ContextMenu 93 控制键
F1 F1 112 功能键
F2 F2 113 功能键
F3 F3 114 功能键
F4 F4 115 功能键
F5 F5 116 功能键
F6 F6 117 功能键
F7 F7 118 功能键
F8 F8 119 功能键
F9 F9 120 功能键
F10 F10 121 功能键
F11 F11 122 功能键
F12 F12 123 功能键
小键盘 0 Numpad0 96 小键盘
小键盘 1 Numpad1 97 小键盘
小键盘 2 Numpad2 98 小键盘
小键盘 3 Numpad3 99 小键盘
小键盘 4 Numpad4 100 小键盘
小键盘 5 Numpad5 101 小键盘
小键盘 6 Numpad6 102 小键盘
小键盘 7 Numpad7 103 小键盘
小键盘 8 Numpad8 104 小键盘
小键盘 9 Numpad9 105 小键盘
小键盘 * NumpadMultiply 106 小键盘
小键盘 + NumpadAdd 107 小键盘
小键盘 - NumpadSubtract 109 小键盘
小键盘 . NumpadDecimal 110 小键盘
小键盘 / NumpadDivide 111 小键盘
NumLock NumLock 144 小键盘
; Semicolon 186 符号
= Equal 187 符号
, Comma 188 符号
- Minus 189 符号
. Period 190 符号
/ Slash 191 符号
` Backquote 192 符号
[ BracketLeft 219 符号
\ Backslash 220 符号
] BracketRight 221 符号
' Quote 222 符号
表里的 code 按 US QWERTY 布局给出,修饰键统一列了左键(ShiftLeft 等),右键把 Left 换成 Right

键码查询捕获浏览器的 keydown 事件,把一次按键拆成四个字段摆在面前:keycodekeyCodelocation,外加四个修饰键和 repeat 状态。点任一张卡片即可复制它的值。

三个字段的分工

字段含义受布局影响该用吗
key按出来的字符是(Shift、输入法、布局都会变)✅ 判断快捷键
code按下的物理键位✅ 游戏 WASD、键位映射
keyCode历史遗留数字码是,且各浏览器不一致❌ 已废弃,只用于读老代码

记法:key 是”打出了什么”,code 是”按了哪儿”。

主键盘 1 和小键盘 1

两者 key 都是 "1",但 code 分别是 Digit1 / Numpad1location 分别是 0 / 3。需要区分(比如收银、计算器类应用)就看 codelocation

捕获区的边界

聚焦时会拦截默认行为,让 Tab、空格、/ 这些键也能被完整观察到。但 Ctrl / ⌘ 组合键不拦,浏览器快捷键照常可用;按 Esc 退出捕获。

本地运行

按键事件只在浏览器内处理,不上传、不记录到任何服务器。

📍使用场景

  • 写键盘快捷键要判断"按了 / 键"该用哪个字段?按一下就知道 key、code、keyCode 分别是什么。
  • 排查键位错乱用户反馈快捷键在他电脑上不灵,让他按一下对照 code——多半是键盘布局或输入法的问题。
  • 区分主键盘和小键盘主键盘的 1 和小键盘的 1,key 都是 "1",code 分别是 Digit1 和 Numpad1,location 也不同。
  • 看懂老代码里的魔法数字遇到 e.keyCode === 13 不用查资料,对照表里搜 13 就知道是 Enter。

常见问题

key、code、keyCode 三个字段该用哪个?

写新代码一律用 keycodekeyCode 已经废弃key 是"按出来的字符",受布局、输入法、Shift 影响——按 Shift+2 得到的是 "@" 而不是 "2"code 是"按下了键盘上哪个物理位置",和布局无关,AZERTY 键盘上左上角那个键永远是 KeyQ判断快捷键用 key(用户想按的是那个字符),做游戏 WASD 控制用 code(要的是那四个位置,法语键盘上是 ZQSD 也照样能玩)。

keyCode 废弃了,为什么还显示?

因为老代码里还有一大堆keyCode 在规范里标记为 deprecated,浏览器出于兼容不会删,但它的值在不同浏览器、不同布局下并不一致(尤其是符号键),新代码不该再用。工具照样显示它,是为了让你读懂 e.keyCode === 13 这种老判断,以及做迁移时能对照——不是推荐你用。

为什么按 Ctrl / ⌘ 组合键没被拦截?

刻意放行的。捕获区聚焦时会 preventDefault() 掉默认行为,否则按 Tab 会跳走焦点、按空格会滚页、按 / 会触发浏览器的页内查找。但 Ctrl / ⌘ 开头的组合一律不拦:拦掉 Cmd+R、Ctrl+W、Ctrl+T 会让人以为浏览器坏了,代价远大于收益。单独按下 Ctrl 或 ⌘ 本身仍然会被记录。按 Esc 可以退出捕获。

为什么有些键按了没反应,或者 key 显示 "Unidentified"?

常见三种原因:① 被操作系统或浏览器吃掉了——F11 全屏、Cmd+Tab 切应用、部分厂商的媒体键,网页根本收不到事件;② 输入法在中间,中文输入法组字期间的按键会走 composition 事件,key 可能是 "Process";③ 键盘固件上报的是非标准扫描码,浏览器映射不出来就给 Unidentified,多见于带宏的机械键盘和部分笔记本的功能键。

长按不放为什么记录里只出现一次?

因为自动重复的按键被排除在历史之外。按住不放时浏览器会持续派发 keydown,event.repeattrue。上方的实时结果照常更新(repeat 标记会亮起来,方便你确认这个字段),但历史列表只记第一次——否则按住一秒就把八条记录全刷成同一个键。

对照表里的 code 和我的键盘对不上?

表里按 US QWERTY 布局给出,这也是 code 的定义基准:它描述的是物理位置,不是键帽上印的字符。所以 AZERTY 键盘按左上角第一个字母键,code 仍然是 KeyQ,而 key 会是 "a"。修饰键统一列了左键(ShiftLeftControlLeftAltLeftMetaLeft),右边那颗把 Left 换成 Right 即可,可以自己按一下验证。