◆ key と code が新しいもの
◆ code は物理的な押されたキーを取得
  ◆ IE11 非対応
◆ key は入力された文字を取得
  ◆ Shift キーや CapsLock や NumLock 状態なども判断
  ◆ IE11 も動くけどキーの呼び方が違うところが多々 

onkeydown などのキーボードイベントを受け取る時にどのキーを押されたかを知るためによく使われてる keyCode ですが deprecated になっていました
じゃあキーを見分けるのに何を使えば良いのと思って調べてみました


キーを見分けれそうなプロパティはいくつかあります

  • keyCode
  • code
  • key
  • which
  • charCode
  • keyIdentifier

この中で keyCode, which, charCode, keyIdentifer は deprecated です

keyIdentifer と charCode

keyIdentifer については Firefox と Chrome 両方ともに存在しません
Chromodo 52 ではあったのでこの 1 年くらいのうちに消えたようです (今の Chrome は 58)

charCode はどちらにもプロパティはありますがキーボードを色々押してみても常に 0 でした
本来の Unicode の charCode は返ってこないのでこれも使えません

keyCode と which

keyCode と which は同じ値です
これまでの一般的な判断基準だったのですが deprecated になりました

値は正しいのが取得できるのでまだ使えますし IE の対応も考えるならこれにしておくのが無難です
ただし Chrome と Firefox でも値が違うところがあるので全ブラウザ対応考えるとブラウザ判定が必要です

このあたりの記号が違う 「-」「^」「@」「;」「:」「_」

key

key は入力した文字を取得できます
同じ A キーでも Shift キーがなければ 「a」 で Shift キーを押していれば 「A」 です
CapsLock が有効なら Shift キー無しで 「A」 になり Shift キーを押していれば 「a」 になります

アルファベットならまだわかりやすいですが記号だと 「;」 と 「+」 が同じキーで Shift キーのありなしで変わります
なので 「実際にキーボードのどこを押したか」という情報を取得したいときには向きません
US キーボードだとまた配置が違いますし

またトグルタイプのキーは押すごとに代わります
半角全角キーは押す度に 「Hankaku」「Zenkaku」 の入れ替わりになります

数字はテンキーでも通常のキーでも 0 は 「0」 です

IE11 でも動きます……が名前が違うところが多々あります

code

key が入力文字だったのに対して code はキーボード上の物理的なキーを取得できます

Shift キーや CapsLock の状態によらず A キーを押せば 「keyA」 です
「+」 と入力しても 「Semicolon」 です

押したキーで判断するので テンキーと通常の数字キーや Ctrl の左右は別扱いします

また USキーボードのキーコードから判断しているのか記号系はところどころキーボードと名前が一致しません
「:」が Quote で 「]」 が Backslash だったり

IE11 は非対応です

どれがいいの

たいていは入力した文字じゃなくて 物理的なキーボードのキーが欲しいので keyCode を置き換えるとしたら code になります
しかし IE が非対応です

なのでとりあえず keyCode で 実際に押された文字がほしいときは key というのが良さそうです

keyCode を使わないとしたら key と code になるわけですが code は keyCode の改善版のようで違いもあります
物理的なキーを取得するため Shift キーを押しながらやトグルタイプのキーでは違いがでてきます

CapsLock やテンキーは Shift 押していると keyCode が変わります
半角全角はどちらに切り替わるかで keyCode が変わります

keyCode だったものを key と code に置き換えるならこのあたりには注意が必要です

確認用

keyCode / code / key の値を知りたいことがよくあるのでテスト用のページ作りました
押したキーの情報が見れます

key チェック

keycheck-example


ブラウザごとの違い

Chrome がベースです
入力keyCodekeycode
a65aKeyA
Shift-A65AKeyA
\ (|のほう)220\IntlYen
\ (_のほう)226\IntlRo
Enter13EnterEnter
Space32Space
Escape27EscapeEscape
F1112F1F1
CapsLock240CapsLockCapsLock
Shift-CapsLock20CapsLockCapsLock
左Shift16ShiftShiftLeft
左Ctrl17ControlControlLeft
左Windows91MetaMetaLeft
左Alt18AltAltLeft
無変換29NonConvertNonConvert
変換28ConvertConvert
ひらがな・カタカナ242HiraganaKanaMode
右Alt18AltAltRight
右クリックメニュー93ContextMenuContextMenu
38ArrowUpArrowUp
40ArrowDownArrowDown
37ArrowLeftArrowLeft
39ArrowRightArrowRight
1491Digit1
テンキー1971Numpad1
Shift-テンキー135EndNumpad1
テンキーEnter13EnterNumpadEnter
NumLock144NumLockNumLock
Insert45InsertInsert
Delete46DeleteDelete
PageUp33PageUpPageUp
PageDown34PageDownPageDown
Backspace8BackspaceBackspace
;187;Semicolon
Shift-;187+Semicolon
Pause19PausePause
ScrollLock145ScrollLockScrollLock
Tab9TabTab
Zenkaku244ZenkakuBackquote
Hankaku243HankakuBackquote
Firefox が違う部分
\ (_のほう)220\IntlRo
左Windows91OSOSLeft
;59;Semicolon
Shift-;59+Semicolon
IE が違う部分
Space32Spacebar
Escape27Esc
CapsLock240Unidentified
左Windows91Win
無変換29Nonconvert
ひらがな・カタカナ242Unidentified
右クリックメニュー93Apps
38Up
40Down
37Left
39Right
Delete46Del
ScrollLock145Scroll
Zenkaku244Unidentified
Hankaku243Unidentified

Firefox は一部のキーコードが違うのと Windows ボタンの呼び方が違うくらいです

それに比べて IE11 はというと……細かな違いが多すぎます
Nonconvert と NonConvert とか
合わせろよ!


こんな調子でキー判定が簡単になる時代はくるのでしょうか……

やっぱりブラウザ判定して共通の呼び方に変換するライブラリ作っておくのが早い気がしますね