棄用的 keyCode 屬性之現代 JavaScript 替代方案是 KeyboardEvent.key 或 KeyboardEvent.code,依據快捷鍵是依循字面意義還是實體位置來選擇。 在瀏覽器應用程式中,請從傳送至自有事件處理器的 KeyboardEvent 讀取這些值。JavaScript Key Code Finder 會在本機擷取一次具有焦點的 keydown 事件,並公開比較及診斷事件行為所需的欄位,以支援該工作流程;它是診斷工具,而非可直接替代使用的程式化 API。

當某項動作應依循目前鍵盤配置及修飾鍵狀態所產生的字元或具名動作時,請使用 key。當控制項必須與實體位置保持關聯時,例如 WASD 移動控制,請使用 code。混淆這兩種模型,是快捷鍵在開發者鍵盤上運作正常,卻在其他配置上失效的常見原因。

javascript keycodes api alternative
JavaScript Keycodes API 替代方案:檢查瀏覽器事件

依行為選擇 key 或 code

這些值可回答不同的問題。在美國鍵盤配置中,同一個實體按鍵可能會依 Shift 的狀態回報 2 或 @,其他配置則可能回報不同的字元。code 值可識別 Digit2 或 KeyW 等位置,通常在配置變更時仍維持穩定。

屬性 代表意義 最適合用途 重要限制
key 套用目前鍵盤配置及修飾鍵狀態後所產生的意義 字元輸入及具名動作快捷鍵 其值可能隨配置或修飾鍵而變更
code 實體按鍵位置 遊戲、移動控制,以及與配置無關的硬體位置 通常保持穩定,但不會描述最終產生的字元
location 標準、左側、右側或數字鍵盤位置 區分特定側別的 Shift、Control、Alt、Meta、Enter 及數字鍵 並非每個按鍵都有多個可能位置
修飾鍵布林值 目前事件所包含的修飾鍵狀態 處理 Ctrl、Alt、Shift 與 Meta 的組合 並非每個已按下按鍵的完整歷史紀錄
repeat 事件是否代表重複的 keydown 事件 避免按住某個按鍵時,同一動作反覆觸發 重複事件的傳送由作業系統或瀏覽器控制
composing 輸入法或無效按鍵組合是否可能正在產生文字 將快捷鍵動作延後至組合完成後 組合行為取決於目前使用的輸入法
keyCode 舊式數值識別碼 診斷舊有程式碼中的相容性問題 已棄用,且會因實作而異

對於大多數新的事件處理器而言,key 與 code 可解決核心設計決策。當重複按鍵、修飾鍵、按住的按鍵或文字組合使事件產生歧義時,其餘欄位可協助進一步縮小判斷範圍。

實作 JavaScript 鍵盤事件處理器

請在掌握該互動行為的事件處理器中直接使用現代欄位,而不要將瀏覽器事件轉換成自訂數值編碼系統。

  1. 限定 keydown 事件處理器的範圍。 請將其附加至負責該快捷鍵的控制項或區域,避免無關的輸入意外觸發動作。
  2. 選擇一個主要欄位。 當行為應依循目前配置時,請將 event.key 與字元或具名值比較;當位置很重要時,請將 event.code 與實體按鍵代碼比較。
  3. 處理重複按鍵與修飾鍵情況。 請檢查 event.location 所代表的標準、左側、右側或數字鍵盤位置,並檢視事件所包含的修飾鍵狀態。
  4. 定義重複與文字組合規則。 如果某項功能每次實體按下時只應執行一次,請忽略重複事件;當事件回報正在進行文字組合時,請延後動作。
  5. 保留無障礙替代方式。 請為重要快捷鍵提供可點選的控制項,且不要讓單一實體鍵盤配置成為完成關鍵動作的唯一方式。

遷移舊有邏輯時,請以明確的 key 或 code 比較取代數值 keyCode 分支。擷取的值可顯示舊分支原本預期的內容,但不應成為新可攜式對應關係的基礎。

在本機檢查實際按鍵事件

當您需要查看特定鍵盤所產生的值,而不是依據鍵盤示意圖進行猜測時,請使用實際瀏覽器擷取功能。

  1. 開啟 JavaScript Key Code Finder,並點選或以 Tab 鍵將焦點移至有框線的擷取區域。
  2. 按下您要檢查的按鍵或按鍵組合。
  3. 比較代表意義的 key 與代表實體位置的 code,然後檢視回報的位置及修飾鍵。
  4. 當這些細節很重要時,請檢查 repeat、composing 及舊式數值 keyCode。
  5. 複製顯示的 JSON 時,僅將其用於診斷、錯誤報告附件或本機測試固定資料。
  6. 請在應用程式支援的實際目標瀏覽器、作業系統及鍵盤配置上測試相同互動行為。

此工具只會在刻意取得焦點的擷取區域內觀察 keydown 事件。在該區域外輸入的內容不會被觀察,擊鍵或文字也不會傳送至伺服器。它只會在頁面狀態中保留最近一次事件,直到頁面變更或重新載入;不會維護事件歷史紀錄,也不會安裝全域事件監聽器。

當擷取目標具有焦點時,除 Tab 鍵以外,其他按鍵的預設動作都會被取消,以避免檢查期間使用 Space 或方向鍵捲動頁面。Tab 鍵永遠不會被取消,因此鍵盤使用者可以將焦點移開,而不會受困於擷取控制項中。

解讀 location 與事件狀態

實用的事件報告會區分按鍵的身分、實體位置,以及與該特定事件關聯的狀態。

  • Location 可識別標準、左側、右側或數字鍵盤變體。當相同的具名按鍵存在於多個位置時,這項資訊很重要,包括修飾鍵、Enter 及部分數字鍵。
  • Modifiers 會回報事件所包含的狀態,而不是所有已按下按鍵的全域歷史紀錄。以 Ctrl 為基礎的快捷鍵應檢查實際的修飾鍵狀態,而不應假設先前的按鍵仍處於作用中。
  • Repeat 會在按住按鍵且作業系統或瀏覽器發出重複 keydown 事件時變成 true。若某項動作只應啟用一次,請使用此屬性抑制重複動作。
  • Composing 表示輸入法編輯器或無效按鍵組合可能正在產生文字。快捷鍵事件處理器通常應等到文字組合完成,以免中斷文字輸入。

這些欄位一次只描述一個事件。它們不會揭露鍵盤型號、產生硬體指紋,也不會重建先前的擊鍵序列。在文字組合作用期間,也應避免假設最終輸入的字元與該按鍵的立即值相同。

僅將 keyCode 用於相容性診斷

W3C UI Events 規格定義了現代鍵盤事件欄位,而MDN 的 KeyboardEvent.keyCode 參考資料則指出 keyCode 已棄用,且會因實作而異。UI Events 並未提供該舊式屬性的可靠現代值。

可列印按鍵的行為在各種瀏覽器及配置間一直有所差異,因此不應將數值解讀為 ASCII、Unicode 或實際輸入的字元。值為零不一定表示沒有該按鍵,也可能表示舊式屬性無法識別該按鍵。因此,此工具顯示的 keyCode 在檢查舊有程式碼的行為時最有用,而不是用來定義新行為。

建立真正的相容性測試計畫

鍵盤處理是應用程式相容性介面的一部分。請測試功能需求中列出的確切環境,不要假設桌面裝置的行為能代表每個受支援的裝置。

  • 測試配置: 請包含每個受支援的鍵盤配置,以及任何依賴配置的字元或快捷鍵預期行為。
  • 測試瀏覽器與作業系統: 請檢查每個受支援的瀏覽器及平台,因為按鍵處理方式可能不同。
  • 測試輸入法與輔助科技: 請驗證受支援的 IME、無效按鍵、無障礙工具及文字組合事件的行為。
  • 謹慎使用固定資料: 對於自動化檢查,此工具包含八個由標準衍生的固定測試資料,涵蓋字母、加上 Shift 的數字、左右 Alt、數字鍵盤 Enter,以及無效按鍵文字組合;另有四個獨特的 location 標籤會分別進行斷言。
  • 在實際裝置上完成測試: 人工建立的 KeyboardEvent 物件並非受信任的使用者輸入,可能無法重現平台原生行為。實際裝置仍是最終的相容性檢查依據。

複製的 JSON 可協助在本機測試中重現某個值,但無法重現瀏覽器的完整事件處理流程。對於功能承諾支援的配置、作業系統、瀏覽器、輔助科技及輸入法,請將實際裝置檢查保留在發行流程中。

辨識頁面可能收不到的事件

聚焦擷取無法顯示瀏覽器或平台從未傳送的按鍵。瀏覽器保留的快速鍵、作業系統快速鍵、無障礙技術、密碼管理工具、遠端桌面與輸入法,都可能在頁面收到事件前攔截事件。行動裝置的虛擬鍵盤也可能提供較少的 code 值,因為這些值並不對應實體鍵盤上的按鍵位置。

請勿在擷取區域中輸入密碼、復原碼或其他機密資料,即使事件仍會保留在本機。鍵盤診斷不需要機密內容。當快速鍵很重要時,請記錄任何已知衝突,並保留非鍵盤控制方式,以免被攔截或無法使用的按鍵阻礙工作。

進行移轉時,請將以數值 keyCode 為主的分支替換為 key 或 code,使用位置與狀態欄位解決歧義,並以原生事件確認每個支援的目標平台上的結果。

相關閱讀:公開 NTP 伺服器清單替代方案:4 個實用選項。

相關閱讀:PowerPoint 快速鍵 API 替代方案:本機參考資料。