⌨ 键盘键码查询
keyCode · key · code · which
keyCode · key · code · which
keyCode是数字值(已废弃),key是字符串值(如"a"、"Enter"),code是物理键位标识(如"KeyA"、"Enter"),推荐使用.key和.code。
浏览器快捷键可能拦截某些键(如Ctrl+S、F5、F12等)。请确保焦点在检测区域内后再按键。
key表示「按键产生的字符」,如按Shift+1会得到"!";code表示「物理键位」,无论Shift是否按下,那个键的code都是"Digit1"。所以code与键盘布局无关,key与输入结果有关。
keyCode在不同浏览器、不同键盘布局、不同系统下取值不一致,跨平台兼容性差。现代标准用key和code替代,所以keyCode被标记为废弃。
用code区分:大键盘数字键是Digit0-Digit9,小键盘是Numpad0-Numpad9。虽然key都是"0"-"9",但code不同。
keydown和keyup对所有键都触发,keypress只对产生字符的键触发且已废弃。写键盘交互一般监听keydown,判断key或code。
通过事件的ctrlKey、shiftKey、altKey、metaKey布尔属性判断。例如 Ctrl+Enter 就是 e.ctrlKey && e.key==="Enter"。
虚拟键盘和物理键盘行为不同,移动端滑动键盘不会产生标准的keydown/keyCode事件,所以本类工具主要面向桌面键盘开发。
三个属性代表按键信息的不同维度,搞清楚区别才能写出跨平台稳定的键盘交互代码。
| 属性 | 表示什么 | 示例 | 是否受键盘布局影响 |
|---|---|---|---|
| key | 按键产生的字符 | "a"、"A"、"Enter"、"!" | 受布局和Shift影响 |
| code | 物理键位 | "KeyA"、"Digit1"、"Enter" | 不受布局影响 |
| keyCode | 旧数字键码 | 65、13、13 | 跨平台不一致 |
推荐写法:判断逻辑用 code(物理键位),判断输入内容用 key(字符)。
写快捷键、游戏、表单交互时主要用keydown;做文本计数、输入校验可以用input事件。
掌握这些常用键码,回车、空格、方向、Esc是交互里出现频率最高的。
| 按键 | key | code | keyCode |
|---|---|---|---|
| 回车 | Enter | Enter | 13 |
| 空格 | Space | Space | 32 |
| Tab | Tab | Tab | 9 |
| 退格 | Backspace | Backspace | 8 |
| 删除 | Delete | Delete | 46 |
| Esc | Escape | Escape | 27 |
| 上 | ArrowUp | ArrowUp | 38 |
| 下 | ArrowDown | ArrowDown | 40 |
| 左 | ArrowLeft | ArrowLeft | 37 |
| 右 | ArrowRight | ArrowRight | 39 |
| Shift | Shift | ShiftLeft/ShiftRight | 16 |
| Ctrl | Control | ControlLeft/ControlRight | 17 |
| Alt | Alt | AltLeft/AltRight | 18 |
| 按键 | keyCode | 说明 |
|---|---|---|
| F1-F12 | 112-123 | 功能键 |
| 0-9(数字) | 48-57 | 数字键 |
| A-Z(字母) | 65-90 | 字母键 |
| 小键盘0-9 | 96-105 | Numpad |
| 小键盘+ | 107 | NumpadAdd |
| 小键盘Enter | 13 | NumpadEnter |
1. 点击下方"按键检测区域"使其获得焦点。
2. 在键盘上按下任意键。
3. 查看详细的键码信息和按键历史。