键盘码速查表
常见按键的 event.key、event.code 与旧 keyCode 三者对照,编写快捷键与键盘事件时快速查阅。
| 按键 | event.key | event.code | keyCode |
|---|---|---|---|
| A | 'a' / 'A' | 'KeyA' | 65 |
| Z | 'z' / 'Z' | 'KeyZ' | 90 |
| 0 | '0' | 'Digit0' | 48 |
| 1 | '1' | 'Digit1' | 49 |
| Enter | 'Enter' | 'Enter' | 13 |
| 空格 Space | ' ' | 'Space' | 32 |
| Tab | 'Tab' | 'Tab' | 9 |
| Esc | 'Escape' | 'Escape' | 27 |
| Backspace | 'Backspace' | 'Backspace' | 8 |
| Delete | 'Delete' | 'Delete' | 46 |
| ← | 'ArrowLeft' | 'ArrowLeft' | 37 |
| → | 'ArrowRight' | 'ArrowRight' | 39 |
| ↑ | 'ArrowUp' | 'ArrowUp' | 38 |
| ↓ | 'ArrowDown' | 'ArrowDown' | 40 |
| Shift | 'Shift' | 'ShiftLeft' / 'ShiftRight' | 16 |
| Ctrl | 'Control' | 'ControlLeft' / 'ControlRight' | 17 |
| Alt | 'Alt' | 'AltLeft' / 'AltRight' | 18 |
| F1 | 'F1' | 'F1' | 112 |
| F12 | 'F12' | 'F12' | 123 |
| / | '/' | 'Slash' | 191 |
| . | '.' | 'Period' | 190 |
| , | ',' | 'Comma' | 188 |
常见问题
event.key 和 event.code 有什么区别?
event.key 是按键的「字符值」(受 Shift/大小写影响,如按 A 出 "a" 或 "A");event.code 是按键的「物理位置」(始终为 "KeyA",不受布局影响)。做快捷键通常优先考虑 event.code 或 event.key 配合修饰键判断。
keyCode 为什么被弃用?
KeyboardEvent.keyCode 是旧 IE 时代的数字编号,与键盘布局不一致、已被 Web 标准标记为 deprecated。新代码应使用 event.key / event.code,但存量库仍常返回 keyCode,排查旧代码时仍需对照本表。
如何屏蔽浏览器默认快捷键(如 Ctrl+S、F12)?
在 keydown 事件里对目标组合调用 event.preventDefault() 即可阻止默认行为。注意:部分快捷键(如某些浏览器的 F11 全屏、DevTools 组合键)由浏览器进程层拦截,网页无法完全屏蔽。
如何判断组合键如 Ctrl+C / Ctrl+Enter?
在 keydown 中同时检查 event.ctrlKey(Mac 用 metaKey)、event.key 或 event.code。例如 Ctrl+C:event.ctrlKey && (event.key === "c" || event.code === "KeyC")。建议用 code 避免输入法/大小写干扰。