Free2BoxFree2Box

鍵盤碼 / 事件檢視器

按下任意鍵查看其 JavaScript 鍵碼、鍵名和事件屬性

按下任意鍵...

按下任意鍵...

按鍵歷史
Your key presses will be recorded here
No keys pressed yet

使用方法

1

開啟工具

無需設定——工具在瀏覽器中即時載入。

2

互動與探索

使用滑鼠、鍵盤或觸控即時互動。

3

隨時隨地使用

桌面與行動裝置皆可使用——隨時隨地練習或創作。

為什麼使用此工具

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

理解兩者差異是正確處理鍵盤事件的關鍵

常見用途

1

快捷鍵實作

實作 Ctrl+S 儲存、Ctrl+Z 復原等快捷鍵。需要同時檢查修飾鍵(ctrlKey、shiftKey)和按鍵值。

2

遊戲控制

遊戲中的 WASD 移動應使用 event.code('KeyW'),這樣無論鍵盤語言設定如何,實體鍵位都一致。

3

表單增強

監聽 Enter 鍵提交表單、Escape 鍵關閉對話框、Tab 鍵自訂焦點切換邏輯。

4

無障礙設計

確保所有互動元素都能用鍵盤操作。測試各按鍵的事件值有助於正確實作鍵盤導航。

實用技巧

快捷鍵用 event.key(字元值),方向鍵/功能鍵用 event.code(實體鍵位)。

event.keyCode 已被 Web 標準棄用,新程式碼應使用 event.key 和 event.code。

注意 keydown 和 keyup 事件的差異——長按時 keydown 會重複觸發,keyup 只觸發一次。

Mac 的 Command 鍵對應 event.metaKey,Windows 的 Ctrl 鍵對應 event.ctrlKey——跨平台快捷鍵需同時處理。

本工具所有運算皆在您的瀏覽器本地完成,不會上傳任何資料至伺服器。內容僅供參考,請依實際需求進行驗證。

常見問題