在线键盘按键代码可视化工具。按键代码检查器

免费在线工具,可实时查看任何键盘按键的event.key、event.code、event.which和位置。生成即用的JavaScript代码片段。

按一个按键

按键盘上的任意按键查看其代码

工具工作室

想把这个工具添加到你的网站吗?

为 WordPress、Notion 或你自己的网站自定义配色和深色模式。

常见问题

event.key和event.code有什么区别?

event.code代表键盘上按键的物理位置,与配置的语言无关。event.key代表生成的字符,如果按下Shift或使用不同的语言,可能会改变。使用code进行游戏控制;使用key进行文本输入和语义快捷方式。

什么是event.which,为什么它已被弃用?

event.which是一个旧属性,返回按键的数字ASCII代码。它在现代标准中被标记为已弃用,因为event.key和event.code用更准确和可读的信息取代了它。出于教育目的,在此工具中显示。

location属性是什么意思?

location属性指示按键在键盘上的物理位置:标准(正常位置)、左(左修饰键)、右(右修饰键)或数字键盘(数字键盘)。有助于区分左右CTRL键,例如。

它是否适用于国际键盘和非QWERTY布局?

是的。该工具显示浏览器针对您的键盘配置报告的确切内容。event.code将始终返回物理位置的QWERTY名称,而event.key将根据您的语言显示实际字符。

# JavaScript中的键盘事件

当用户按下按键时,浏览器会触发三个事件:keydownkeypresskeyup。每个都暴露有关按下的按键的信息的属性,但并非所有属性都是等效或推荐的。

# 按键事件属性

event.code — 物理按键

使用QWERTY命名法返回键盘上按键物理位置的标识符。例如,AZERTY键盘上的"A"键返回KeyQ。对于位置重要而不是字符的游戏控制非常理想。

event.key — 生成的字符

返回根据语言和活动修饰符生成的字符值。按Shift+A返回"A";没有Shift时返回"a"。对于特殊按键,返回名称如"Enter""Escape""ArrowUp"

# 何时使用每个属性

对于游戏控制(无论语言如何都使用WASD)使用event.code,对于检测特定字符或语义键盘快捷方式(如Ctrl+C)使用event.key
根据W3C标准,event.whichevent.keyCode属性被正式弃用。尽管现代浏览器为了兼容性继续支持它们,但不应在新代码中使用它们。

参考文献