键盘事件代码 - JavaScript键盘事件查看器 在线工具
按下任意键即可实时查看JavaScript键盘事件属性。查看event.key、event.code、keyCode、修饰键状态等 — 100%客户端处理，无数据发送至服务器。
常见问题
什么是键盘事件代码查看器？
键盘事件代码查看器是一个在线工具，当您按下键盘上的任意键时，它会显示JavaScript KeyboardEvent的所有属性。它显示event.key（字符或键名）、event.code（物理键标识符）、event.keyCode（数字代码）、修饰键状态等值。开发者使用此工具在构建键盘交互、游戏、无障碍功能或表单验证时快速查找正确的事件属性值。
如何使用这个键盘事件代码工具？
点击页面顶部的捕获区域，然后按下键盘上的任意键。工具会立即显示该按键的所有事件属性，包括key、code、keyCode、which、location和修饰键状态。您可以使用标签页在keydown、keyup和keypress事件类型之间切换。使用复制按钮复制单个值或将完整事件数据复制为JSON。下方的事件历史记录显示您最近的按键，方便对比。
我的数据安全吗？我的按键会被记录吗？
所有键盘事件捕获都100%在您的浏览器中完成。没有按键、事件数据或任何其他信息会发送到任何服务器。该工具使用原生浏览器KeyboardEvent API，无需外部服务调用。您的按键仅临时存储在浏览器内存中用于历史记录，关闭页面后即被清除。即使在安全敏感的环境中也可以安全使用此工具。
event.key和event.code有什么区别？
event.key表示按下的键的逻辑值，会根据键盘布局和修饰键而变化。例如，按'A'键通常得到key: 'a'，按住Shift则得到key: 'A'。event.code表示键盘上的物理键位置，与布局或修饰键无关。同一个物理键始终返回code: 'KeyA'。文本输入处理使用event.key，游戏控制或与布局无关的操作使用event.code。
为什么keyCode、which和charCode被弃用了？
这些属性被弃用是因为它们在不同浏览器和键盘布局之间不一致。event.keyCode在不同操作系统上对同一个键返回不同的数值。现代替代方案是event.key（用于字符值）和event.code（用于物理键）。所有现代浏览器都支持这些新属性，它们在各平台间提供一致且可预测的值。
event.location告诉我什么？
event.location指示键在键盘上的位置。它返回一个数字：大多数键为0（Standard），左Shift或左Ctrl等左侧修饰键为1（Left），右侧修饰键为2（Right），数字键盘上的键为3（Numpad）。当您需要区分左右Shift键，或区分主Enter键和数字键盘Enter键时非常有用。
keydown和keyup事件有什么区别？
keydown在按下键的瞬间触发，如果持续按住键则会重复触发（event.repeat为true）。keyup在释放键时触发一次。已弃用的keypress事件在keydown和keyup之间触发，但仅适用于产生字符值的键（不适用于Shift、Ctrl、方向键等）。在大多数情况下，建议监听keydown事件。
代码示例
// Keyboard Event Handling in JavaScript
// Basic keydown event listener
document.addEventListener('keydown', (event) => {
console.log('key:', event.key); // "a", "Enter", "Shift"
console.log('code:', event.code); // "KeyA", "Enter", "ShiftLeft"
console.log('keyCode:', event.keyCode); // 65, 13, 16 (deprecated)
console.log('location:', event.location); // 0, 0, 1
// Modifier key states
console.log('shiftKey:', event.shiftKey);
console.log('ctrlKey:', event.ctrlKey);
console.log('altKey:', event.altKey);
console.log('metaKey:', event.metaKey);
console.log('repeat:', event.repeat);
});
// Using event.code for layout-independent controls (e.g., WASD)
document.addEventListener('keydown', (event) => {
switch (event.code) {
case 'KeyW': moveForward(); break;
case 'KeyA': moveLeft(); break;
case 'KeyS': moveBackward(); break;
case 'KeyD': moveRight(); break;
case 'Space': jump(); break;
}
});
// Detecting modifier combinations
document.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
saveDocument();
}
if (event.metaKey && event.key === 'k') {
event.preventDefault();
openCommandPalette();
}
});
// Extracting full event data as an object
function extractKeyEventData(event) {
return {
type: event.type,
key: event.key,
code: event.code,
keyCode: event.keyCode,
which: event.which,
charCode: event.charCode,
location: event.location,
repeat: event.repeat,
isComposing: event.isComposing,
shiftKey: event.shiftKey,
ctrlKey: event.ctrlKey,
altKey: event.altKey,
metaKey: event.metaKey,
};
}
document.addEventListener('keydown', (event) => {
const data = extractKeyEventData(event);
console.log(JSON.stringify(data, null, 2));
});