鍵盤碼 / 事件檢視器
按下任意鍵查看其 JavaScript 鍵碼、鍵名和事件屬性
按下任意鍵...
The capture pad keeps shortcuts local to this page instead of hijacking the whole document.
Key
--
keyCode
--
which
--
code
--
location
--
事件類型
--
修飾鍵
繼續下一步
用相關的下一個動作延續你的工作流程。
Privacy & Trust
Focused capture
Keyboard events are captured inside the dedicated pad instead of intercepting the whole document.
按鍵歷史
Review the latest 10 key events with modifiers, code, and legacy numeric fields.
結果
Everything stays local in the browser, which is useful when checking keyboard behavior in private environments.
結果
Press a key to generate an event snapshot.
使用方法
開啟工具
無需設定——工具在瀏覽器中即時載入。
互動與探索
使用滑鼠、鍵盤或觸控即時互動。
隨時隨地使用
桌面與行動裝置皆可使用——隨時隨地練習或創作。
為什麼使用此工具
100% 免費
沒有隱藏費用，沒有付費等級——所有功能完全免費。
無需安裝
完全在瀏覽器中運行。無需下載或安裝任何軟體。
隱私且安全
您的資料永遠不會離開您的裝置。不會上傳至任何伺服器。
支援行動裝置
完全響應式設計——在手機、平板或桌面電腦上均可使用。
鍵盤按鍵碼指南：KeyboardEvent 的完整解析
重點摘要
- event.key 回傳按鍵的字元值（'a'），event.code 回傳實體鍵位（'KeyA'）
- 已棄用的 event.keyCode 仍被廣泛使用，但應改用 event.key 和 event.code
- 不同鍵盤配置（QWERTY vs AZERTY）的 code 相同但 key 不同
處理鍵盤事件是前端開發的常見需求——快捷鍵、遊戲控制、表單增強都需要準確識別使用者按下的按鍵。KeyboardEvent 提供多種屬性（key、code、keyCode），每個屬性的用途不同。按鍵碼查詢工具讓你實際按下按鍵查看所有屬性值，是前端開發的便捷參考。
key vs code
理解兩者差異是正確處理鍵盤事件的關鍵
常見用途
快捷鍵實作
實作 Ctrl+S 儲存、Ctrl+Z 復原等快捷鍵。需要同時檢查修飾鍵（ctrlKey、shiftKey）和按鍵值。
遊戲控制
遊戲中的 WASD 移動應使用 event.code（'KeyW'），這樣無論鍵盤語言設定如何，實體鍵位都一致。
表單增強
監聽 Enter 鍵提交表單、Escape 鍵關閉對話框、Tab 鍵自訂焦點切換邏輯。
無障礙設計
確保所有互動元素都能用鍵盤操作。測試各按鍵的事件值有助於正確實作鍵盤導航。
實用技巧
快捷鍵用 event.key（字元值），方向鍵/功能鍵用 event.code（實體鍵位）。
event.keyCode 已被 Web 標準棄用，新程式碼應使用 event.key 和 event.code。
注意 keydown 和 keyup 事件的差異——長按時 keydown 會重複觸發，keyup 只觸發一次。
Mac 的 Command 鍵對應 event.metaKey，Windows 的 Ctrl 鍵對應 event.ctrlKey——跨平台快捷鍵需同時處理。
本工具所有運算皆在您的瀏覽器本地完成，不會上傳任何資料至伺服器。內容僅供參考，請依實際需求進行驗證。