键盘测试
按下任一键即显示 event.key、event.code 与 keyCode。可测试键盘是否有失灵或连发的按键,也可查出快捷键该绑哪一个属性。
在你的浏览器中运行
- event.key
- —
- event.code
- —
- event.keyCode
- —
- 位置
- —
- 修饰键
- —
开启拦截后,Tab 与方向键会被记录下来,而不会移动焦点或滚动页面。要正常使用这个网页时请关掉它。
有些键永远传不到网页:系统快捷键、多数笔记本上的 Fn,以及浏览器自己保留的按键。
这一页有两个用途
测硬件。 把每个键都按一次。完全没有反应的键表示讯号没有传到浏览器;按一下却连续触发的是 接点抖动;显示出错字的则是配置问题而不是硬件问题。
查按键码。 要绑快捷键、需要知道拿什么去比对时,按一下读出来就好。
key、code 与 keyCode
每一次按键都带着三种描述「发生了什么」的方式,而挑错是快捷键「在作者电脑上正常、在别人电脑上 坏掉」最常见的原因。
| 属性 | 回答的是 | QWERTY 的 W | AZERTY 上同一个实体键 |
|---|---|---|---|
event.key | 产生了什么字元 | w | z |
event.code | 按下了哪一个实体键 | KeyW | KeyW |
event.keyCode | 已弃用的数字码 | 87 | 87 |
所以:
- 要绑字元——像
Ctrl+S存档这种以字母当助记符的快捷键——用event.key。它跟着键盘配置 走,这也是使用者的预期:在任何键盘上S都代表存档。 - 要绑位置——游戏的 WASD 移动——用
event.code。它跟着实体键走,所以在 AZERTY、QWERTZ 与 Dvorak 上,手的姿势是一样的。
搞反了,就是某些网页游戏在法文键盘上完全没法玩的原因:它们把 WASD 绑到了 key,而在 AZERTY 上
这几个字母不在那个位置。
为什么还显示 keyCode,却不该用它
keyCode 在 UI Events 规范中已被弃用多年。这里还显示它,是因为所有浏览器仍然会送出它,而且
还有大量既有代码在读它——除错那些代码时,看到这个数字是真的有用。
但新东西不该用它。它把字元和位置混为一谈,各家浏览器的数值从未完全统一,而且对于不产生字元的 按键根本没有意义。
永远传不到网页的按键
键盘上有一部分不归网页管,而这是设计如此,不是故障:
- 系统快捷键。
Cmd+Tab、Alt+Tab、Cmd+Space在任何应用程序看到之前就被作业系统拦走了。 - Fn。 多数笔电的 Fn 键是在键盘自己的固件里处理的,根本不会产生事件;被它修饰的那些键才会。
- 浏览器快捷键。
Ctrl+T、Ctrl+W、Ctrl+N,以及开启开发者工具的功能键,都被浏览器保留。 网页无法覆写它们,而这是刻意的——一个能拦截Ctrl+W的网页,就是一个可以拒绝被关掉的网页。 - 多媒体与硬件键。 音量、亮度、键盘背光都在浏览器底下处理掉了。
如果某个键在这里没有反应,先到文字编辑器里试一次,再下「键盘坏了」的结论。
死键与输入法
在有死键的配置上——许多欧洲配置的重音键——第一次按下时 key 是 Dead,不产生任何字元;
字元要等按下下一个键才会出现。
启用中文、日文或韩文输入法时,按键会先进入输入法。event.key 回报的是 Process,最后真正
出现的文字是透过组字事件送达的。这就是为什么只监听 keydown 的键盘处理程序会完全接不到中文
输入,也是为什么文字栏位应该监听 input,而不是自己从按键事件拼字。
拦截 Tab 与方向键
这两类键默认不拦截。Tab 会移动焦点、方向键会卷动页面,而一个把它们吃掉的网页,等于夺走了依赖 键盘操作的人的导览方式。要看到它们被记录就打开拦截,要正常使用这个网页就关掉。
一切都留在浏览器里
按键只是被读取并显示出来。没有任何记录、储存或传送——对一个会看着你每一次敲键的页面来说,这句话 值得明讲。