toolfree

鍵盤測試

按下任一鍵即顯示 event.key、event.code 與 keyCode。可測試鍵盤是否有失靈或連發的按鍵,也可查出快捷鍵該綁哪一個屬性。

在你的瀏覽器中執行

按任意鍵
等待按鍵…
event.key
event.code
event.keyCode
位置
修飾鍵

開啟攔截後,Tab 與方向鍵會被記錄下來,而不會移動焦點或捲動頁面。要正常使用這個網頁時請關掉它。

最近按下的鍵

有些鍵永遠傳不到網頁:系統快速鍵、多數筆電上的 Fn,以及瀏覽器自己保留的按鍵。

這一頁有兩個用途

測硬體。 把每個鍵都按一次。完全沒有反應的鍵表示訊號沒有傳到瀏覽器;按一下卻連續觸發的是 接點抖動;顯示出錯字的則是配置問題而不是硬體問題。

查按鍵碼。 要綁快捷鍵、需要知道拿什麼去比對時,按一下讀出來就好。

key、code 與 keyCode

每一次按鍵都帶著三種描述「發生了什麼」的方式,而挑錯是快捷鍵「在作者電腦上正常、在別人電腦上 壞掉」最常見的原因。

屬性回答的是QWERTY 的 WAZERTY 上同一個實體鍵
event.key產生了什麼字元wz
event.code按下了哪一個實體鍵KeyWKeyW
event.keyCode已棄用的數字碼8787

所以:

搞反了,就是某些網頁遊戲在法文鍵盤上完全沒法玩的原因:它們把 WASD 綁到了 key,而在 AZERTY 上 這幾個字母不在那個位置。

為什麼還顯示 keyCode,卻不該用它

keyCode 在 UI Events 規範中已被棄用多年。這裡還顯示它,是因為所有瀏覽器仍然會送出它,而且 還有大量既有程式碼在讀它——除錯那些程式碼時,看到這個數字是真的有用。

但新東西不該用它。它把字元和位置混為一談,各家瀏覽器的數值從未完全統一,而且對於不產生字元的 按鍵根本沒有意義。

永遠傳不到網頁的按鍵

鍵盤上有一部分不歸網頁管,而這是設計如此,不是故障:

如果某個鍵在這裡沒有反應,先到文字編輯器裡試一次,再下「鍵盤壞了」的結論。

死鍵與輸入法

在有死鍵的配置上——許多歐洲配置的重音鍵——第一次按下時 keyDead,不產生任何字元; 字元要等按下下一個鍵才會出現。

啟用中文、日文或韓文輸入法時,按鍵會先進入輸入法。event.key 回報的是 Process,最後真正 出現的文字是透過組字事件送達的。這就是為什麼只監聽 keydown 的鍵盤處理程式會完全接不到中文 輸入,也是為什麼文字欄位應該監聽 input,而不是自己從按鍵事件拼字。

攔截 Tab 與方向鍵

這兩類鍵預設不攔截。Tab 會移動焦點、方向鍵會捲動頁面,而一個把它們吃掉的網頁,等於奪走了依賴 鍵盤操作的人的導覽方式。要看到它們被記錄就打開攔截,要正常使用這個網頁就關掉。

一切都留在瀏覽器裡

按鍵只是被讀取並顯示出來。沒有任何記錄、儲存或傳送——對一個會看著你每一次敲鍵的頁面來說,這句話 值得明講。