KeyboardTest.io

鍵盤事件檢視器

0個事件
保留最近200筆
事件keycodekeyCode位置修飾鍵重複Δ ms

每個鍵盤事件都會顯示在這裡,最新的在最上面。

預設動作

key、code與keyCode

3個屬性

KeyboardEvent用三種方式標示一次按鍵。在法文AZERTY鍵盤上,同一個實體鍵的key值不同、code相同,keyCode則跟著字母變。

屬性代表什麼QWERTYAZERTY
key配置打出的字元,或按鍵名稱(Enter、Shift)qa
code實體按鍵,不管是哪種配置KeyQKeyQ
keyCode舊式的數字,已不建議使用但仍會送出8165
依位置的快捷鍵(WASD)用code,文字和依字母的快捷鍵用key。

location

4種值

location屬性說明成對的鍵在哪一邊,或是這個鍵在數字鍵區。

0 · 標準大多數的鍵,鍵盤上只有一個
1 · 左左Shift、Ctrl、Alt和Meta
2 · 右右Shift、Ctrl、Alt和Meta
3 · 數字鍵區數字鍵區的鍵,包括Enter

輸入法與keyCode 229

IME

開著中文、日文或韓文輸入法時,按鍵會先交給輸入法。頁面看到的是key「Process」、keyCode 229,文字則在組字事件裡傳來。以注音輸入ㄋㄧ打出「你」為例:

  1. keydownkey「Process」 · keyCode 229
  2. compositionstart輸入法開始組字
  3. compositionupdatedata是ㄋ,接著是ㄋㄧ
  4. keydown空白鍵選字
  5. compositionenddata是選定的字
  6. inputinputType insertCompositionText
處理按鍵前先檢查isComposing,否則選字用的Enter也會送出表單。

修飾鍵

getModifierState

每個事件都帶著當下按住的修飾鍵。getModifierState()也會回報鎖定鍵。

ShiftshiftKey
ControlctrlKey
AltaltKey
MetametaKey(Windows鍵,Mac上是Command)
CapsLock鎖定狀態,不是鍵有沒有按下
NumLock鎖定狀態,Mac上常是未知
AltGraph很多歐洲配置的右Alt
ScrollLock現在的鍵盤上很少見

常見問題

8個問題

event.key和event.code有什麼不同?

字元與實體按鍵

key是這個鍵在目前配置下打出的內容,例如a或A。code是實體按鍵,例如KeyA,換什麼配置都一樣。這個鍵盤事件檢視器每次按鍵都會同時顯示兩者。

為什麼keyCode是229?

輸入法在處理

這個鍵正由輸入法(IME)處理。key顯示「Process」,文字稍後才在組字和input事件裡傳來。在輸入框裡打字就看得到。

keyCode已經淘汰了嗎?

是

keyCode、which和charCode都已不建議使用,但瀏覽器仍會送出。新的程式碼請讀key或code。

為什麼Fn沒有任何事件?

不會送出

Fn由鍵盤自己處理,不送出按鍵碼,所以任何網頁都收不到。和Fn一起按的鍵,例如F5或音量鍵,則會顯示。

為什麼攔不到Ctrl+W或Ctrl+T?

被瀏覽器保留

瀏覽器保留了一些快捷鍵給自己:關閉分頁、新分頁、新視窗。阻擋預設動作可以擋下大多數其他鍵,例如Tab、F5或/,但擋不了這些。

為什麼按住一個鍵會一直觸發keydown?

自動重複

系統會重複按住的鍵。每次重複都是一個repeat為true的keydown,放開時只有一個keyup。

為什麼Mac上有些keyup不見了?

按著Command

按住Command時,macOS的瀏覽器不會送出其他鍵的keyup,放開Command之後也不會補送。 Mac鍵盤測試 →

這會上傳我的按鍵嗎?

測試不會上傳

事件只在這個瀏覽器裡處理。測試程式不會上傳,關閉頁面就清除。 隱私權政策 →