鍵盤事件記錄器.
顯示瀏覽器原始鍵盤事件的診斷面板。適合開發者用來除錯事件處理程式,或檢查特定按鍵屬性。
即時事件
| 事件 | Key | Code | KeyCode | Location | 修飾鍵 | 時間戳記 |
|---|---|---|---|---|---|---|
| 尚未記錄任何鍵盤事件。請聚焦擷取區域並按下按鍵。 | ||||||
記錄前請先檢查這些項目
- 聚焦擷取方框先點擊它或按下 Tab — 在它取得焦點之前,不會記錄任何事件。
- 每次測試之間先清除記錄在測試新按鍵之前重設記錄,讓重複事件的檢查保持清楚易讀。
- 留意時間戳記同一次按壓卻出現兩個相差僅幾毫秒的 keydown,代表軸體回跳,而非操作失誤。
事件記錄器的運作原理
- 1
聚焦擷取區域。點擊上方方框,或按下 Tab 使其聚焦。狀態文字會改變,顯示正在監聽鍵盤事件。
- 2
按下任意按鍵。每個 keydown 與 keyup 事件都會連同其原始屬性一起被記錄 — key、code、keyCode、location、修飾鍵與時間戳記。表格即時更新,新事件會加在最上方。
- 3
管理你的記錄。使用「清除記錄」按鈕重設表格,或使用「匯出為 CSV」下載所有事件,以便在試算表或除錯工具中分析。
理解鍵盤事件屬性
key是按鍵實際產生的字元(例如 "a"、"A"、"1")。它會隨鍵盤配置以及是否啟用修飾鍵(Shift、Alt)而改變。在法式 AZERTY 鍵盤上,最左側的字母鍵會產生 "a",而不是 "q"。
code是實體按鍵,與配置無關(例如 "KeyA"、"Digit1"、"Enter")。按下同一個實體按鍵,無論配置或修飾鍵為何,永遠會回傳相同的 code。
keyCode是在現代的 key 與 code 屬性出現之前使用的舊式數字代碼(例如 A 鍵為 65)。它現在已被棄用,因為在不同瀏覽器間不一致,對國際鍵盤與特殊按鍵也不可靠。請改用 code 或 key。
location用來區分鍵盤上重複的按鍵。標準按鍵回報 location 0;左側修飾鍵(Shift、Ctrl、Alt)回報 1;右側修飾鍵回報 2;數字鍵盤按鍵回報 3。記錄器會將這些顯示為易懂的標籤:「標準」、「左側(修飾鍵)」、「右側(修飾鍵)」、「數字鍵盤」。
修飾鍵旗標是布林屬性 — ctrlKey、shiftKey、altKey、metaKey — 用來表示事件發生時是否按住了 Ctrl、Shift、Alt 或 Command/Windows 鍵。它們可以自由組合:按下 Ctrl+Shift+A 會讓 ctrlKey 與 shiftKey 同時為 true。
repeat在按住的按鍵持續觸發重複的 keydown 事件(自動重複)時為 true。第一次 keydown 的 repeat: false;若持續按住該按鍵,後續的 keydown 則會是 repeat: true。這個記錄器只顯示 keydown 與 keyup,因此你可以透過觀察連續出現的相同項目,找出重複觸發的按鍵。
事件記錄器適合誰使用
除錯按鍵處理程式
開發自訂鍵盤互動功能的網頁開發者,可以精確查看觸發了哪些事件、順序為何,並檢視完整的事件物件屬性,確保處理程式能正確回應使用者按下的按鍵。
偵測按鍵回跳
故障的軸體有時會因單次按壓而觸發兩次 keydown 事件(回跳)。觀察時間戳記,你可以發現快速出現的重複事件,並追溯到同一顆實體按鍵 — 這代表硬體磨損或軸體需要處理。
辨識不明按鍵
在鍵盤上發現標示不熟悉或帶有媒體符號的按鍵?在這裡按下它,查看它的 code 與 key 屬性,了解它觸發了什麼事件,或將它對應到你的應用程式或遊戲設定中。
驗證重新映射與修飾鍵
測試鍵盤重新映射軟體或作業系統層級的按鍵綁定,記錄事件並確認按下的按鍵產生預期的 code 與修飾鍵組合。檢查 AltGr 與其他國際修飾鍵是否正確辨識。
鍵盤事件術語詞彙表
key- 按鍵所產生的字元,受鍵盤配置與修飾鍵影響 — 例如 "a"、"A"、"1"、"!"、"é"。
code- 實體按鍵的位置,與配置無關 — 例如 "KeyA"、"Digit1"、"Enter"、"Space",無論配置或修飾鍵為何都保持一致。
keyCode(已棄用)- 舊式的數字代碼(例如 A 鍵為 65)。請勿在新程式碼中使用 — 它在不同瀏覽器間不一致,對國際鍵盤也不可靠。
location- 按鍵的實體位置:0 = 標準,1 = 左側修飾鍵,2 = 右側修飾鍵,3 = 數字鍵盤。可用來區分左右 Shift 鍵,以及數字鍵盤按鍵與一般按鍵。
repeat- 布林旗標,當按住的按鍵觸發重複的 keydown 事件(自動重複)時為 true。第一次 keydown 為 false;若按鍵持續按住,後續的則為 true。
- 修飾鍵旗標(
ctrlKey、shiftKey、altKey、metaKey) - 布林旗標,表示事件發生時是否按住了 Ctrl、Shift、Alt 或 Command/Windows 鍵。按鍵組合時可以同時有多個旗標為 true。
鍵盤事件記錄器常見問題
key 與 code 有什麼差別?
key 是鍵盤實際產生的字元(例如 'a'、'A'、'1'、'!'),會受鍵盤配置以及是否按住 Shift 等修飾鍵影響。code 則是按鍵的實體位置(例如 'KeyA'、'Digit1'),與配置及修飾鍵無關 — 在不同地區按下同一個實體按鍵,永遠會回傳相同的 code。對國際鍵盤而言,code 保持不變,而 key 會改變。
什麼是 keyCode?為什麼它已被棄用?
keyCode 是分配給每個按鍵的舊式數字代碼(例如 A 鍵為 65)。它在現代的 key 與 code 屬性出現之前被使用,現已棄用,因為它在不同瀏覽器間不一致,對國際鍵盤或特殊按鍵也不可靠。請改用 code 表示實體按鍵位置,用 key 表示產生的字元。
我要如何偵測按鍵回跳(一個按鍵被記錄兩次)?
按鍵回跳發生在單次按壓產生兩次或更多次 keydown 事件,且中間沒有 keyup 的情況。在記錄器中檢查是否有相同 code、時間差非常小(通常小於 50 毫秒)的快速重複 keydown 項目。如果某個按鍵持續出現回跳,可能是該軸體的硬體問題;部分鍵盤或驅動程式可設定防彈跳,請參考你鍵盤的韌體或軟體說明。
記錄器會儲存或上傳我的按鍵嗎?
不會。所有記錄都完全在你的瀏覽器中進行。你輸入的任何內容都不會傳送到伺服器、上傳、儲存,或記錄在你裝置以外的任何地方。重新整理頁面就會完全清除記錄。這個記錄器是給開發者使用的診斷工具 — 你的隱私與資料不會被傳輸。
為什麼有些按鍵(例如 Fn 或多媒體鍵)不會出現在記錄中?
像 Fn 以及許多專用的多媒體、音量或亮度按鍵，在瀏覽器看到事件之前，就已由鍵盤韌體或作業系統處理掉了，因此記錄器沒有東西可以記下。這是正常現象，並非故障。若你已點按擷取框使其取得焦點後，某個標準按鍵在這裡仍完全不產生 keydown 事件，那反而代表軸體損壞或線路斷開。