按鍵代碼檢查器

按鍵代碼檢查器是一個開發人員工具，可讓您即時檢查在瀏覽器中按下的鍵盤按鍵如何在 JavaScript 中被識別為事件資料。

在前端開發中，當基於使用者輸入實作快速鍵或遊戲控制時，需要準確的按鍵偵測。使用此工具，您可以一目瞭然地取得 event.key、event.code 和 event.keyCode 等按鍵屬性，並點擊即可複製。它也很容易測試不同鍵盤配置（例如 JIS 與 US）以及與 Shift 和 Ctrl 等修飾鍵組合的行為。

您還可以查看按鍵輸入歷史紀錄，並在啟用 e.preventDefault() 時，安全地測試阻止瀏覽器預設動作（例如 Tab 移動或 Space 捲動）的效果。

event.key

代表使用者實際輸入的字元或功能。例如，在 US 鍵盤上按下 Shift + 1，event.key 將是 !。這是評估邏輯輸入最推薦的屬性。

event.code

指出被按下按鍵的實體位置。無論鍵盤語言配置為何，按下 "A" 位置的按鍵將始終傳回 KeyA。這對於依賴實體配置的動作非常有用，例如遊戲中的 WASD 移動。

event.keyCode / event.which

傳回分配給按下按鍵的系統特定數字代碼（例如，A 是 65）。雖然在 JavaScript 開發中使用了很長時間，但現在已經棄用。它們應該只用於向後相容性檢查。

event.location

一個數字，指出按鍵在鍵盤上被按下的實體區域。它可以區分標準按鍵 (0)、左修飾鍵 (1)、右修飾鍵 (2) 和數字鍵盤按鍵 (3)。

preventDefault()

一個 JavaScript 方法，用於取消由事件觸發的瀏覽器預設行為，例如按下 Space 鍵時向下捲動頁面。

Q.我可以在智慧型手機或平板電腦上使用嗎？

如果您連接了實體鍵盤，它可以正常運作。但是，對於螢幕軟體鍵盤，keydown 事件可能無法正確觸發（取決於作業系統或瀏覽器實作），或者它可能總是傳回相同的按鍵代碼（例如 229）。此工具設計用於實體鍵盤。

Q.我應該使用 event.key 還是 event.code？

這取決於您的使用案例。如果您要評估按鍵的含義或輸入的字元（例如，「按 Enter 提交」），請使用 event.key。另一方面，如果您要根據鍵盤上的實體位置來執行動作（例如，「使用 W、A、S、D 移動角色」），使用 event.code 是最佳做法。

Q.我可以阻止像 F5 或 Ctrl+W 這樣的快速鍵嗎？

即使您使用 JavaScript 的 e.preventDefault()，您也可能無法完全阻止保留在安全或作業系統/瀏覽器層級的強大快速鍵，例如關閉索引標籤、重新載入視窗或開啟瀏覽器開發人員工具。

Q.為什麼 event.keyCode 被棄用？

因為傳回的數值可能會因瀏覽器、作業系統和鍵盤配置而異，從而導致相容性問題。目前建議使用 event.key 或 event.code。

Q.輸入的按鍵資料會傳送到伺服器嗎？

不會傳送。所有處理都是在您的瀏覽器中使用 JavaScript 完成的，您的按鍵輸入歷史紀錄絕不會傳送到或儲存在任何外部伺服器上。

以下是需要檢查按鍵代碼的典型開發場景。