KeyCode Inspector
v1.0 · KEYBOARD EVENT ANALYZER
READY
实时键盘事件分析 · KeyboardEvent API

按下任意键
解构键盘事件

专为 Web 开发者设计的专业键盘事件检查器。按任意键即可实时查看所有 JavaScript 键盘事件属性。是调试键盘交互、构建自定义快捷键和理解键盘 API 的必备工具。

CURRENT_KEY
—
t = 0.00ms
PRESS ANY KEY
等待键盘输入
KEY_DURATION 0.00 ms
MODIFIER_KEYS
Shift
shiftKey
Ctrl
ctrlKey
Alt
altKey
Meta
metaKey
LOCATION
—
REPEAT
—
EVENTS
0
RECENT_KEYS
尚无按键记录
// EVENT_PROPERTIES

事件属性详情

现代 已弃用 元数据
// VIRTUAL_KEYBOARD

虚拟键盘可视化

按键时对应键位会高亮显示，便于直观对照 code 属性与物理位置的映射关系。

// QUICK_TIPS

开发者提示

物理键检测

使用 code 进行物理键检测，不受键盘布局影响。

字符输入

使用 key 处理字符输入，会随修饰键和布局变化。

避免使用

避免使用 keyCode，它已被弃用且跨浏览器不一致。

修饰键组合

检查 shiftKey / ctrlKey 等状态以实现快捷键。

// TUTORIAL

如何使用 KeyCode 查看器

1

按任意键

点击工具区域并按键盘上的任意键开始检测。

2

查看属性

所有键盘事件属性立即显示，包括现代与旧版属性。

3

复制值

点击属性右侧的复制按钮，将值复制到剪贴板。

4

测试组合

按住修饰键再按其他键，测试快捷键组合的状态变化。

理解键盘事件属性

key 推荐

按下的键的实际值（如 "a"、"A"、"Enter"、"ArrowUp"）。根据修饰键和键盘布局变化。用于字符输入检测。

code 推荐

表示键盘上键位置的物理键代码（如 "KeyA"、"Digit1"、"ArrowUp"）。在不同键盘布局中保持一致。用于游戏控制和物理键检测。

keyCode 已弃用

键的数字代码（如 "A" 为 65）。在浏览器和键盘之间不一致。避免在新代码中使用。

location 元数据

指示键的物理位置（0：标准，1：左侧，2：右侧，3：数字键盘）。用于区分左/右修饰键。

最佳实践代码示例

// 推荐做法：使用 key 处理字符输入 document.addEventListener('keydown', (e) => { if (e.key === 'Enter') { submitForm(); } }); // 推荐：使用 code 处理游戏控制 document.addEventListener('keydown', (e) => { switch (e.code) { case 'KeyW': player.moveUp(); break; case 'KeyS': player.moveDown(); break; } }); // 检查修饰键组合（跨平台快捷键） document.addEventListener('keydown', (e) => { const isMod = e.metaKey || e.ctrlKey; if (isMod && e.key === 'k') { e.preventDefault(); openCommandPalette(); } });

常见使用场景

键盘快捷键

使用 code 配合修饰键检测 Ctrl+S、Cmd+K 等。

表单导航

使用 key 处理 Enter、Tab、Escape 键。

游戏控制

使用 code 处理 WASD、方向键和动作按钮。

无障碍访问

为屏幕阅读器用户实现键盘导航。

// FAQ

常见问题

// ABOUT

关于此工具

此工具显示全面的信息，包括现代属性（key、code）和旧版属性（keyCode、which、charCode），以及修饰键状态和事件元数据。非常适合在不同浏览器和键盘布局中测试键盘事件处理器。

实时检测
即时显示所有键盘事件属性
现代标准
显示推荐的 key 和 code 属性
旧版支持
包含已弃用的 keyCode、which、charCode
修饰键跟踪
Shift、Ctrl、Alt、Meta 状态
按键位置
识别左/右修饰键和数字键盘
一键复制
复制任何属性值到剪贴板
跨浏览器
在所有现代浏览器中一致工作
键盘布局感知
正确处理不同的键盘布局
开发者提示
内置最佳实践和建议
已复制到剪贴板