過去幾個 Chrome 版本發現,KeyboardEvent
新增了兩個新增項目,這個項目會做為傳遞至 keydown
、keypress
和 keyup
事件監聽器的參數。code
屬性 (已加到 Chrome 48) 和 key
屬性 (已加到 Chrome 51 中) 可讓開發人員透過舊版屬性,輕鬆取得原本可能難以理解的資訊。
程式碼屬性
首先是 code
屬性。此為字串,代表已按下並產生 KeyboardEvent
的按鍵,而「沒有」採用目前的鍵盤配置 (例如 QWERTY 與 Dvorak)、語言代碼 (例如英文和法文),或將任何輔助鍵納入考量。當您想知道按下的是哪個實體鍵,而非所對應的字元時,這項功能就非常實用。舉例來說,如果是編寫遊戲,您可能會想使用一組特定按鍵讓玩家往不同方向移動,因此該對應最好能與鍵盤配置無關。
主要屬性
接著,我們有新的 key
屬性。該變數也設為字串,但 code
會傳回已按下實體鍵的相關資訊,key
則包含該鍵產生的字元,且會考量目前的鍵盤配置、語言代碼和輔助鍵。當您需要瞭解螢幕上顯示的字元,就像使用者輸入文字時一樣,可以查看 key
屬性的值。
實務上該怎麼做呢?
以下舉個具體範例說明,假設您的使用者目前使用具有 QWERTY 鍵盤配置的美國鍵盤。如果按下該鍵盤上的實體 Q
鍵,則會出現 KeyboardEvent
,並將 code
屬性設為 "KeyQ"
。無論鍵盤配置和其他輔助鍵為何,這種做法都是如此。為了比較,在法文 (AZERTY) 鍵盤上,即使鍵盤上的字母是「a」,這個按鍵的 code
仍是 "KeyQ"
。在同一個美國鍵盤上按下實體 Q
鍵時,通常會產生 KeyboardEvent
,key
設為 "q"
(沒有輔助鍵)、"Q"
(含 Shift 或 CapsLock 鍵) 或 "œ"
(OS X 有輔助鍵)。在法文 AZERTY 鍵盤上,相同的按鍵會產生「a」(或「A」具有 Shift 或 CapsLock)。此外,對於其他鍵盤版面配置,key
值可以是 "й"
、"ض"
、"ㅂ"
、"た"
或其他字元。
回顧先前的遊戲範例,如果想使用 WASD 鍵移動遊戲,可以使用 code
屬性,並檢查 "KeyW"
、"KeyA"
、"KeyS"
和 "KeyD"
。這項做法適用於所有鍵盤和所有配置,包括交換「w」和「z」鍵位置的 AZERTY 鍵盤。
虛擬鍵盤
您會發現,到目前為止,我們始終專注於假設使用實體鍵盤。使用虛擬鍵盤或其他輸入裝置輸入內容的使用者會有什麼影響?規格提供 code
屬性的官方指南。總而言之,如果虛擬鍵盤模仿標準鍵盤的版面配置,應設定適當的 code
屬性,但採用非傳統版面配置的虛擬鍵盤可能完全無法設定 code
。
key
屬性的特性較為簡單,您應該根據使用者以虛擬方式輸入的字元,將屬性設為字串。
立即體驗
Gary Kačmarčík 彙整了絕佳示範,以視覺化方式呈現 KeyboardEvent
的所有相關屬性:
跨瀏覽器支援
自本文開始時,code
屬性僅支援 Chrome 48 以上版本、Opera 35 以上版本和 Firefox 44 以上版本。
key
屬性適用於 Firefox 44+、Chrome 51 以上版本和 Opera 38 以上版本,且在 Internet Explorer 9 以上版本和 Edge 13 以上版本支援部分支援。