在 JavaScript 按鍵代碼查詢工具的聚焦擷取區域內按下任何按鍵，工具就會回傳開發人員處理快捷鍵、遊戲輸入和無障礙診斷時所需的標準 KeyboardEvent 欄位:key(符合鍵盤配置的字符或具名動作)、code(不受配置影響的實體按鍵)、location(左、右、標準或數字鍵盤)、修飾鍵清單、repeat 旗標、composition 旗標，以及用於相容性診斷的已淘汰數值 keyCode。這是一種檢視瀏覽器實際回報內容的實用做法，因為 KeyboardEvent 的數值取決於目前作用中的鍵盤配置、作業系統、瀏覽器引擎，以及按下按鍵當下可能作用中的任何輸入法。與其猜測數字或依賴過時的 ASCII 表，不如直接取得瀏覽器在您目前的環境中指派給該單一 keydown 事件的確切屬性值。擷取區域是本機且暫時性的:僅保留最新事件，不記錄任何歷史，也不上傳任何內容，這使得在除錯真實快捷鍵處理程序時使用本工具是安全的。
JavaScript 按鍵代碼查詢工具擷取哪些內容
聚焦的 JavaScript 按鍵代碼查詢工具會在一個刻意保持聚焦的測試區域內監聽單一鍵盤事件，並將該單一 keydown 對應至開發人員常用的數值。它會顯示現代的 key 與 code 欄位、location 屬性、作用中的修飾鍵清單、repeat 旗標、composing 旗標，以及用於相容性診斷的舊式數值 keyCode。頁面僅記錄最近一次事件，且從不掛載全域監聽器，因此在擷取區域之外的輸入永遠不會被觀察到。
這個範圍刻意設計得如此狹窄。鍵盤診斷工具絕不應該看到密碼、復原碼或其他機密資料，而本工具的設計正是讓使用者無需輸入機密資料即可操作。在測試區域內按下字母、數字、導覽鍵、修飾鍵、功能鍵或數字鍵盤按鍵，對應的 KeyboardEvent 物件就會就地顯示。所有內容都不會傳送至伺服器，因此即使您的開發環境其他分頁仍保持登入狀態，您也可以安全地在同一個瀏覽器分頁中使用。
為何即時檢查工具在 KeyboardEvent 工作上勝過靜態表格
靜態參考資料無法回答「在我的瀏覽器、目前的配置、按下這些修飾鍵的情況下，現在按下我的按鍵會產生什麼結果」這個問題。key 和 code 欄位回答的是不同的問題。key 代表套用目前鍵盤配置與修飾鍵狀態後所產生的意義。在美式配置上，同一個實體按鍵依 Shift 鍵是否按下的不同，可能會回報為 2 或 @;其他配置則可能回報完全不同的字符。code 代表實體按鍵的位置，例如 Digit2 或 KeyW，通常在配置變更時保持穩定。
舊式的數值 keyCode 僅供相容性診斷使用。根據 MDN KeyboardEvent.keyCode 參考資料，keyCode 已被淘汰且其實作因瀏覽器而異，而 W3C UI Events 規範並未為其定義可靠的現代數值。可列印按鍵的行為在歷史上於各瀏覽器與配置間有所不同，因此新程式碼應使用 key 或 code 並搭配針對特定功能的測試，而不是從 keyCode 推斷 ASCII、Unicode 或輸入字符。即時檢查工具可讓您清楚看到當切換配置、更換瀏覽器或按住修飾鍵時，這三個屬性中究竟是哪一個發生了變化。
如何使用 JavaScript 按鍵代碼查詢工具
請依照下列步驟，在不離開瀏覽器的情況下檢查任何按鍵組合。
- 點擊或以 Tab 鍵切換至有邊框的擷取區域，使其取得焦點。
- 按下您要檢查的按鍵或組合，包括您想同時驗證的任何修飾鍵。
- 比較 key(符合配置的代表意義)與 code(實體位置)，然後檢視 location、修飾鍵清單、repeat 旗標與 composing 旗標。
- 僅將顯示的 JSON 紀錄複製為錯誤報告或本機測試 fixtures 的診斷用途，並在您功能所支援的真實目標瀏覽器、配置、作業系統及輸入法上驗證相同的快捷鍵。
解讀輸出:key、code 與舊式的 keyCode
通常造成混淆的三個欄位會顯示在同一行。下表摘要說明在測試區域內擷取到的單一 keydown 事件中，它們在實務上如何不同。
| 屬性 | 代表意義 | 是否取決於配置? | 狀態 |
|---|---|---|---|
| key | 套用配置與修飾鍵後的按鍵意義，例如 a、A、Shift 或 ArrowUp | 是 | 建議用於遵循字符或具名動作的快捷鍵 |
| code | 實體按鍵位置，例如 KeyA、Digit2 或 ArrowUp | 正常使用下為否 | 建議在位置很重要時使用，例如 WASD 移動或數字鍵盤處理 |
| keyCode | 舊式的數值識別碼 | 因實作而異 | 已淘汰;請勿用於新程式碼，且請勿從中推斷 ASCII 或 Unicode |
keyCode 讀數為 0 並不一定代表該按鍵不存在;它可能代表舊式屬性無法識別該按鍵。請將任何數值僅視為診斷用途，在正式環境的處理程序中應優先使用 key 或 code。
修飾鍵、Location、Repeat 與 Composition 旗標
同一個 KeyboardEvent 中的四個額外部分決定了快捷鍵處理程序應如何回應。修飾鍵清單(shiftKey、ctrlKey、altKey、metaKey)會回報該擷取事件中所包含的狀態，而不是您過去所有按鍵的全域歷史。若清單中未出現某個修飾鍵，代表瀏覽器在這個特定事件中並未將其納入，您的處理程序應根據實際數值進行分支，而非預設為某個值。
location 屬性能區分標準、左、右及數字鍵盤的變體。這點對於 Shift、Control、Alt、Meta、Enter 以及可能出現在多個位置的數字鍵很重要，因為使用者按下右 Shift 與左 Shift 應產生相同的快捷鍵，但可能會回報不同的 location 數值。repeat 旗標在作業系統或瀏覽器於按鍵被按住期間反覆發出 keydown 事件時會變為 true，因此在每次事件都會觸發昂貴作業的處理程序中，應在適當時根據 repeat 加以把關。composing 旗標表示輸入法或死鍵組合可能正在產生文字，因此快捷鍵處理程序通常應避免在組合完成前採取動作，特別是在接受 CJK 或其他基於 IME 輸入的欄位中。
常見陷阱與上線前應測試的項目
瀏覽器保留的快捷鍵、作業系統快捷鍵、無障礙輔助技術、密碼管理工具、遠端桌面與輸入法，都可能在使用者分頁收到事件前先行攔截，這代表在開發人員機器上運作良好的處理程序，在使用者機器上可能從未被觸發。行動裝置的虛擬鍵盤因沒有實體按鍵位置，可能會暴露較少的 code 數值，因此任何依賴 code 的功能都需要觸控備案。
在自動化測試方面，請謹慎建構 KeyboardEvent fixtures，因為合成事件並非受信任的使用者輸入，可能無法重現原生平台行為。一組標準的 fixtures 應涵蓋字母、加上 Shift 的數字、左與右 Alt、數字鍵盤 Enter，以及死鍵組合，而四個獨特的 location 標籤則應各自獨立斷言。真實裝置仍是最終的相容性把關:請測試您的功能所支援的確切配置、作業系統、瀏覽器、輔助技術與 IME，記錄已知的衝突，為關鍵的快捷鍵提供可點擊的備用控制項，且絕不讓單一實體鍵盤配置成為完成關鍵動作的唯一方式。
如需更深入的探討，請參閱屬性轉 JSON:跳脫規則與重複鍵處理。