键盘按键码相关工具合集
按键码工具合集：区分 keyCode、which 与 code 三套取值体系，说明 keydown 与 keypress 的触发差异、组合键的判定顺序，以及 event.key 与 event.code 各自的适用场景与输入法兼容问题，附按键查询与文本处理工具入口。适合处理快捷键绑定、输入框与国际化键盘布局问题。
键盘事件的取值体系有三套，混用会导致快捷键在不同语言布局下失效。
常见方案对照
| 维度 | event.key | event.code |
|---|---|---|
| 含义 | 按下的键（语义） | 按键的物理位置 |
| 受键盘布局影响 | 是 | 否 |
| 受输入法影响 | 是 | 否 |
| 举例（Ctrl+Z） | 随语言变化 | 恒为 "KeyZ" |
| 适用场景 | 显示、文本处理 | 快捷键、游戏控制、表单 |
| 死键与组合字符 | 可能异常 | 稳定 |
| 数字键与小键盘 | 无法区分 | 能区分（Numpad1 与 Digit1） |
| 浏览器支持 | 全部现代浏览器 | 全部现代浏览器 |
边界条件
- 输入法合成期间（isComposing 为 true）不逐字符触发 keydown，这是 IME 的设计而非缺陷。
- event.key 的值受操作系统键盘布局影响，同一物理键在不同语言下返回不同字符。
- 小键盘数字与主键盘数字在 key 下无法区分，code 可以（Numpad1 与 Digit1）。
- event.keyCode 与 which 已废弃，不要在新代码里使用。
常见坑
- 用 key 做快捷键，在非英语布局（如德语、法语）上快捷键失效。
- 在 keydown 里读取输入内容，永远拿到上一次的值。
- 输入法组合输入（如拼音打字）时逐字符拦截 keydown，打断了候选词上屏。
- 用已废弃的 keyCode 做比较，浏览器未来版本可能不再支持。
相关工具
- 键盘按键信息实时显示按键的 keyCode、key、code 与 location 属性并捕获修饰键状态。实时显示按键的键名、键码、物理键位与所在区域，并捕获修饰键组合状态。区分可打印字符与功能键，说明各属性在不同键盘布局下的差异。适合开发快捷键、游戏操控与无障碍功能。键值信息可一键复制。可区分可打印字符与功能键。
- 文本统计实时统计字符数、单词数、行数、字节数与预估阅读时间，支持中英文混合计数。同时给出字符数、单词数、行数，以及 UTF-8 与 GBK 两种编码下的字节数，中文在其中占用不同。区分可见字符与空白字符，并估算阅读或朗读所需时间。适合核对接口字段长度上限与数据库字段约束。所有指标随输入实时更新。
- 文本差异比较基于 LCS 算法逐行比较两段文本差异，新增与删除行内联高亮，支持忽略大小写与空白。以行为单位比较两段文本，逐行标出新增、删除与修改并内联高亮字符级差异。可选择忽略大小写、首尾空格与空行，减少无意义差异干扰。适合代码走查、配置变更核对与文档版本比对。结果可导出为差异文本。可忽略大小写与空白行。
- 哈希生成器从文本生成 SHA-1、SHA-256、SHA-384、SHA-512 哈希摘要，并支持 MD5 与 RIPEMD-160，输出十六进制。可切换大小写与逐行计算，方便与官方公布的校验值逐行比对。计算基于浏览器 Web Crypto 的 subtle.digest，不引入第三方库。
常见问题
event.key 和 event.code 该用哪个？
**看你要的是「哪个键」还是「哪个位置」。** event.key 是**语义**取值，表示按下的键是什么（受布局与输入法影响，Ctrl+Z 可能返回 "z" 或日文字符）；event.code 是**物理**取值，表示键盘上哪个位置被按（恒为 "KeyZ"，与布局无关）。做快捷键、输入框、游戏控制用 code；做显示、文本处理用 key。**表单与快捷键优先用 code**，因为它不受输入法与布局影响。
为什么 keydown 里读不到输入的字符？
因为 keydown 在按键**物理按下**时触发，此时字符还没进入输入框。要读字符应直接读 input 的 value，或用已废弃但仍可用的 keypress。现代做法是：用 keydown 处理快捷键（Ctrl/Cmd 组合），用 input 事件处理文本输入，两者不要混用。此外 IME 输入法合成期间 keydown 只触发一次而不逐字符触发，这是输入法场景的另一个坑。