鍵盤碼 / 事件檢視器
按下任意鍵查看其 JavaScript 鍵碼、鍵名和事件屬性
按下任意鍵...
使用方法
開啟工具
無需設定——工具在瀏覽器中即時載入。
互動與探索
使用滑鼠、鍵盤或觸控即時互動。
隨時隨地使用
桌面與行動裝置皆可使用——隨時隨地練習或創作。
為什麼使用此工具
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——跨平台快捷鍵需同時處理。
本工具所有運算皆在您的瀏覽器本地完成,不會上傳任何資料至伺服器。內容僅供參考,請依實際需求進行驗證。