鍵盤測試
按下任一鍵即顯示 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 會移動焦點、方向鍵會捲動頁面,而一個把它們吃掉的網頁,等於奪走了依賴 鍵盤操作的人的導覽方式。要看到它們被記錄就打開攔截,要正常使用這個網頁就關掉。
一切都留在瀏覽器裡
按鍵只是被讀取並顯示出來。沒有任何記錄、儲存或傳送——對一個會看著你每一次敲鍵的頁面來說,這句話 值得明講。