无需登录 数据私有 本地保存

数字小键盘与主键盘码值区别

22
0
0
0

数字小键盘 vs 主键盘 — 键码对比

实时测试键盘事件 · 对比 key / code / keyCode / location 属性

点击此处激活 · 然后按下任意键进行测试
试试主键盘数字键 和 小键盘数字键,观察区别
-
event.key
-
event.code
-
event.keyCode
-
event.location
-
event.which
-
NumLock: 检测中...
最近按键记录:
主键盘区 数字小键盘区 — 完整对比参考表
按键 来源 event.key event.code event.keyCode event.location 说明
0 主键盘 0 Digit0 48 0 (标准) 主键盘数字行
0 小键盘 0 Numpad0 96 3 (小键盘) 小键盘数字键0
1 主键盘 1 Digit1 49 0 (标准) 主键盘数字行
1 小键盘 1 Numpad1 97 3 (小键盘) 小键盘数字键1 · NumLock关→End
2 主键盘 2 Digit2 50 0 (标准) 主键盘数字行
2 小键盘 2 Numpad2 98 3 (小键盘) 小键盘数字键2 · NumLock关→ArrowDown
3 主键盘 3 Digit3 51 0 (标准) 主键盘数字行
3 小键盘 3 Numpad3 99 3 (小键盘) 小键盘数字键3 · NumLock关→PageDown
4 主键盘 4 Digit4 52 0 (标准) 主键盘数字行
4 小键盘 4 Numpad4 100 3 (小键盘) 小键盘数字键4 · NumLock关→ArrowLeft
5 主键盘 5 Digit5 53 0 (标准) 主键盘数字行
5 小键盘 5 Numpad5 101 3 (小键盘) 小键盘数字键5 · NumLock关→Clear
6 主键盘 6 Digit6 54 0 (标准) 主键盘数字行
6 小键盘 6 Numpad6 102 3 (小键盘) 小键盘数字键6 · NumLock关→ArrowRight
7 主键盘 7 Digit7 55 0 (标准) 主键盘数字行
7 小键盘 7 Numpad7 103 3 (小键盘) 小键盘数字键7 · NumLock关→Home
8 主键盘 8 Digit8 56 0 (标准) 主键盘数字行
8 小键盘 8 Numpad8 104 3 (小键盘) 小键盘数字键8 · NumLock关→ArrowUp
9 主键盘 9 Digit9 57 0 (标准) 主键盘数字行
9 小键盘 9 Numpad9 105 3 (小键盘) 小键盘数字键9 · NumLock关→PageUp
+ 主键盘 + (Shift) Equal 187 0 (标准) 与=共享键位,需Shift
+ 小键盘 + NumpadAdd 107 3 (小键盘) 独立按键
- 主键盘 - Minus 189 0 (标准) 与_共享键位
- 小键盘 - NumpadSubtract 109 3 (小键盘) 独立按键
* 主键盘 * (Shift) Digit8 56 0 (标准) Shift+8
* 小键盘 * NumpadMultiply 106 3 (小键盘) 独立按键
/ 主键盘 / Slash 191 0 (标准) 与?共享键位
/ 小键盘 / NumpadDivide 111 3 (小键盘) 独立按键
. 主键盘 . Period 190 0 (标准) 主键盘小数点
. 小键盘 . NumpadDecimal 110 3 (小键盘) 小键盘小数点 · NumLock关→Delete
Enter 主键盘 Enter Enter 13 0 (标准) 主键盘回车键
Enter 小键盘 Enter NumpadEnter 13 3 (小键盘) keyCode相同(13),靠code/location区分
NumLock 功能键 NumLock NumLock 144 0 (标准) 切换小键盘模式
常见问题与知识点

最可靠的方法是使用 event.code 属性。小键盘的数字键 code"Numpad" 开头(如 Numpad0Numpad1),而主键盘数字键的 code"Digit" 开头(如 Digit0Digit1)。

也可以使用 event.location 属性:小键盘返回 3,主键盘返回 0。不推荐使用已废弃的 keyCode(小键盘96-105,主键盘48-57),因为它在未来可能被移除。

event.code 代表键盘的物理键位,不受键盘布局、语言或修饰键(Shift/CapsLock)影响。例如无论美式键盘还是法式键盘,左上角字母键的 code 始终是 "KeyQ"

event.key 代表该键当前实际输出的字符,会受修饰键和键盘布局影响。例如按下Shift+Q,key"Q"(大写),而 code 仍是 "KeyQ"

建议:处理快捷键或游戏控制时使用 event.code;处理文本输入时使用 event.key

event.keyCodeevent.which 已在现代Web标准中被标记为废弃(deprecated)。推荐使用:
event.key — 获取键的逻辑值(如 "ArrowUp""a""Enter"
event.code — 获取物理键位标识(如 "ArrowUp""KeyA""Enter"
event.location — 判断键位来源(标准/左侧/右侧/小键盘)

如果需要兼容旧浏览器,可以先检查新属性是否存在,回退到 keyCode

NumLock开启时:小键盘输出数字和运算符,event.key"0"~"9""+""-" 等。

NumLock关闭时:小键盘按键映射为导航功能键,event.key 会变化:
• Numpad0 → "Insert"
• Numpad1 → "End"
• Numpad2 → "ArrowDown"
• Numpad3 → "PageDown"
• Numpad4 → "ArrowLeft"
• Numpad6 → "ArrowRight"
• Numpad7 → "Home"
• Numpad8 → "ArrowUp"
• Numpad9 → "PageUp"
• NumpadDecimal → "Delete"

event.code 始终保持不变(如 "Numpad0"),这是区分物理键位的关键。

两者的 event.key 都是 "Enter"event.keyCode 都是 13,仅凭这两个属性无法区分

但可以通过以下方式区分:
event.code:小键盘为 "NumpadEnter",主键盘为 "Enter"
event.location:小键盘为 3,主键盘为 0(或1/2)

如果你的应用需要区分用户按下的是哪个Enter键(例如在数据录入表单中),请使用 event.codeevent.location

event.location 是一个整数,表示按键在键盘上的物理位置
0DOM_KEY_LOCATION_STANDARD:标准键位(几乎所有按键)
1DOM_KEY_LOCATION_LEFT:左侧修饰键(如左Shift、左Ctrl、左Alt)
2DOM_KEY_LOCATION_RIGHT:右侧修饰键(如右Shift、右Ctrl、右Alt)
3DOM_KEY_LOCATION_NUMPAD:数字小键盘区域

这个属性是区分小键盘按键最可靠的方式之一,且不会被NumLock状态影响。

现代浏览器(Chrome 90+、Firefox 90+、Safari 14+、Edge 90+)对小键盘事件的处理基本一致event.codeevent.location 的表现是标准化的。

主要差异点:
旧版IE(已淘汰):小键盘的 keyCode 可能与标准不同
SafarigetModifierState('NumLock') 支持较晚(Safari 15+)
移动浏览器:虚拟键盘通常不暴露小键盘事件,location 可能始终为0

建议使用 event.codeevent.location 组合判断,兼容性最好。

推荐做法:
1. 使用 event.key 获取逻辑值:无论来自主键盘还是小键盘,数字键的 key 都是 "0"~"9",无需分别处理
2. 需要区分来源时检查 event.code:判断是否以 "Numpad" 开头
3. 在输入过滤中同时处理两类键:例如允许数字输入时,检查 event.key >= '0' && event.key <= '9' 即可覆盖两种键盘

示例代码:
const isNumpad = event.code.startsWith('Numpad');
const isDigit = /^[0-9]$/.test(event.key);

移动设备的虚拟键盘没有独立的小键盘区域,所有数字输入通过虚拟键盘的数字模式完成,event.location 通常为 0event.code 可能为空字符串或不标准。

建议:
• 不要依赖 event.location === 3 来判断移动端的小键盘输入
• 使用 event.key 获取输入值,这是跨平台最稳定的方式
• 对于需要精确键位判断的应用(如游戏),考虑提供屏幕按钮作为移动端的替代输入方案
• 在移动端优先使用 input 事件而非 keydown 来处理文本输入

这是由早期的键盘硬件扫描码标准(IBM PC/AT键盘协议)决定的。小键盘拥有独立的物理电路和扫描码,在操作系统层面被映射为不同的虚拟键码(VK_NUMPAD0 ~ VK_NUMPAD9),对应数值96-105。主键盘数字行则映射为48-57。

这种设计允许操作系统和应用程序区分同一数字的两种输入来源,从而支持NumLock切换功能——当NumLock关闭时,小键盘的数字键可以自动转换为导航键(Home/End/箭头等),而主键盘数字行不受影响。

在现代Web开发中,建议使用 event.code(如 "Numpad0")来替代硬编码的keyCode数值。