# 键盘按键测试工具使用教程：在线检测键盘好坏，实时显示按键代码

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/keyboard-test-guide

## 工具简介

**键盘按键测试**是工具派推出的一款免费在线键盘检测工具：打开页面后无需任何设置，直接在物理键盘上按任意键，页面中的全尺寸键盘布局会把对应按键实时蓝色高亮，同时显示该按键的 `key`、`code`、`keyCode`、`which` 等完整事件信息，并自动识别当前按下的组合键和 CapsLock 状态。它还会把最近 20 条按下 / 释放事件记入日志，可选开启按键音效，整个过程完全在浏览器本地运行，不上传任何数据。无论是新键盘验货、排查按键失灵 / 连击，还是前端开发中查询按键代码，都可以打开即用。

## 功能亮点

- **全尺寸键盘可视化**：页面呈现 Esc + F1–F12 功能键行、数字行、三排字母符号行、Ctrl / Win / Alt / 空格修饰键行以及独立的方向键行，布局与标准键盘一致，按哪个键哪个键就蓝色高亮，松开即恢复。
- **8 项按键信息卡片**：每次按键后展示 `key`、`code`、`keyCode`、`which`、`location`、`repeat`、`type`（按下 / 释放）、`time` 八个字段，前端开发查按键代码一目了然。
- **组合键自动识别**：同时按住 Ctrl、Shift、Alt、Win 等修饰键时，页面会实时拼出「当前组合」，如 `Ctrl + Shift + S`，方便调试快捷键。
- **CapsLock 状态指示**：顶部状态徽标实时显示 CapsLock「开启 / 关闭」，关闭为绿色、开启为橙色，避免大小写状态搞不清楚。
- **按键事件日志**：下方日志区按时间倒序记录最近 20 条事件，包含时间、按下 / 释放、key、code、keyCode、which，连击（repeat）事件会单独标记，并支持一键「清空」。
- **可选按键音效**：勾选「开启按键音效」后，每次按下新键会播放一声短促提示音（长按自动重复时不重复响），不测键盘时也能当打字音使用。
- **移动端友好提示**：检测到手机 / 平板访问时会提示「物理键盘测试请在 PC 浏览器中使用」，避免误操作。

## 参数说明

| 参数 | 说明 | 默认值 / 取值范围 |
| --- | --- | --- |
| 开启按键音效 | 页面右上方复选框，勾选后每次按下新键播放一声短提示音，长按产生的 repeat 事件不响 | 默认关闭 |
| CapsLock 状态 | 顶部状态徽标，根据系统 CapsLock 状态自动显示 | 自动检测，取值「开启」（橙色）/「关闭」（绿色） |
| 按键信息卡片 | 最近一次按键的事件详情，共 8 个字段 | key、code、keyCode、which、location、repeat（是/否）、type（按下/释放）、time，按任意键后自动出现 |
| 当前组合 | 按住修饰键时实时拼出的组合键字符串 | 自动识别，形如 `Ctrl + Shift + S`，无组合时不显示 |
| 按键事件日志 | 下方日志列表，时间倒序 | 固定保留最近 20 条，超出自动丢弃最旧记录 |
| 日志「清空」按钮 | 日志区标题栏右侧按钮 | 点击后立即清空全部日志 |

## 使用步骤

1. **打开工具页面**：页面顶部是工具标题与简介，下方白色面板即测试区——最上方是 CapsLock 状态和「开启按键音效」复选框，中间是键盘布局，底部是事件日志，无需登录即可使用。

![键盘按键测试主界面：顶部为工具标题「键盘按键测试」及简介；中部白色测试面板第一行左侧为 CapsLock 状态徽标（绿色](article/202607/1783994195259_2975.png)

2. **按下任意键开始测试**：在物理键盘上按任意键，键盘布局中对应的按键立即变为蓝色高亮，松开即恢复灰色；同时上方出现 8 张信息卡片，显示该键的 key、code、keyCode、which、location、repeat、type 和触发时间。

3. **测试组合键**：按住 Ctrl、Shift、Alt、Win 中任意修饰键再按字母键，信息卡片下方会出现蓝色「当前组合」条，实时显示如 `Ctrl + C`、`Alt + F4` 这样的组合，松开修饰键后消失。

4. **检查 CapsLock 状态**：按一下 CapsLock 键，顶部徽标会在绿色「关闭」和橙色「开启」之间切换，可用来确认大小写锁定键是否正常工作。

5. **逐个按键排查**：验货或排查失灵时，从左到右逐行按过所有按键，观察每个键是否都能正常高亮、信息卡片是否正常刷新；某个键按下无高亮即可能是坏键，按下后高亮「卡住」不恢复则可能是连击或粘连。

6. **查看与清空事件日志**：底部日志区按时间倒序记录最近 20 条按下 / 释放事件，长按某键时可以看到橙色 `repeat` 标记；点标题栏右侧「清空」按钮可随时重置记录。

## 使用技巧

- **验货按「之」字形过一遍**：新键盘到手，从 Esc 开始按行逐键按到底，再按方向键，全部能高亮且无卡顿即为合格，整个过程不到一分钟。
- **排查连击看日志 repeat 标记**：长按某键时日志会连续出现带橙色 `repeat` 的按下事件；如果轻点一下就刷出多条按下记录，说明该键可能存在连击（双击）故障。
- **查按键代码看 code 而非 keyCode**：`keyCode` / `which` 是历史遗留字段，新代码建议用卡片中的 `code`（如 `KeyA`、`Digit1`），它不随键盘布局和大小写变化，更稳定。
- **区分左右修饰键看 location**：左右两个 Shift / Ctrl / Alt 的 `code` 不同（ShiftLeft / ShiftRight），`location` 字段也会标示 1（左）或 2（右），调试快捷键时很有用。
- **注意页面会拦截按键默认行为**：测试区会阻止按键的默认行为，因此在页面上按 F5、F12 等不会触发浏览器刷新 / 开发者工具，需要刷新时请直接用鼠标点浏览器按钮。
- **开音效当打字音**：勾选「开启按键音效」后每次按键都有短促提示音，写稿、聊天时打开页面放在后台即可获得机械键盘般的听觉反馈。

## 常见问题

**Q1：为什么按了键页面没有反应？**
请确认：① 使用的是 PC 浏览器且接了物理键盘（手机 / 平板会显示黄色提示条，不支持测试）；② 鼠标先点击过页面使其获得焦点；③ 没有被输入法或其他软件全局拦截该按键。

**Q2：测试时按 F5 / Ctrl+W 为什么浏览器没反应？**
为了完整捕获按键，页面会对按键事件调用 `preventDefault()` 阻止默认行为，所以 F5 刷新、F12 开发者工具等在页面聚焦时不会生效。这是正常现象，用鼠标操作浏览器即可，关闭页面后一切恢复正常。

**Q3：key、code、keyCode 三个字段有什么区别？**
`key` 是按键产生的字符（如 `a`、`A`，随 CapsLock / Shift 变化）；`code` 是按键的物理位置编码（如 `KeyA`，不随大小写变化）；`keyCode` 和 `which` 是历史遗留的数字编码，新开发中推荐用 `code`。

**Q4：按键音效为什么没有声音？**
请先勾选右上角「开启按键音效」复选框，并确认系统音量和浏览器未静音。另外长按按键自动重复（repeat）时不会重复响，只有新按下的键才有提示音。

**Q5：日志为什么最多只有 20 条？**
为避免长时间测试时列表无限增长影响性能，日志固定只保留最近 20 条，新事件会把最旧的挤掉。需要重新开始时点「清空」按钮即可。

**Q6：我的按键数据会被上传吗？**
不会。所有按键检测都在浏览器本地通过 JavaScript 事件完成，不经过网络、不保存到服务器，关掉页面记录即消失，可以放心测试。