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 チェック

ブラウザごとの違い

Chrome がベースです

入力	keyCode	key	code
a	65	a	KeyA
Shift-A	65	A	KeyA
\ (|のほう)	220	\	IntlYen
\ (_のほう)	226	\	IntlRo
Enter	13	Enter	Enter
Space	32		Space
Escape	27	Escape	Escape
F1	112	F1	F1
CapsLock	240	CapsLock	CapsLock
Shift-CapsLock	20	CapsLock	CapsLock
左Shift	16	Shift	ShiftLeft
左Ctrl	17	Control	ControlLeft
左Windows	91	Meta	MetaLeft
左Alt	18	Alt	AltLeft
無変換	29	NonConvert	NonConvert
変換	28	Convert	Convert
ひらがな・カタカナ	242	Hiragana	KanaMode
右Alt	18	Alt	AltRight
右クリックメニュー	93	ContextMenu	ContextMenu
↑	38	ArrowUp	ArrowUp
↓	40	ArrowDown	ArrowDown
←	37	ArrowLeft	ArrowLeft
→	39	ArrowRight	ArrowRight
1	49	1	Digit1
テンキー1	97	1	Numpad1
Shift-テンキー1	35	End	Numpad1
テンキーEnter	13	Enter	NumpadEnter
NumLock	144	NumLock	NumLock
Insert	45	Insert	Insert
Delete	46	Delete	Delete
PageUp	33	PageUp	PageUp
PageDown	34	PageDown	PageDown
Backspace	8	Backspace	Backspace
;	187	;	Semicolon
Shift-;	187	+	Semicolon
Pause	19	Pause	Pause
ScrollLock	145	ScrollLock	ScrollLock
Tab	9	Tab	Tab
Zenkaku	244	Zenkaku	Backquote
Hankaku	243	Hankaku	Backquote
Firefox が違う部分
\ (_のほう)	220	\	IntlRo
左Windows	91	OS	OSLeft
;	59	;	Semicolon
Shift-;	59	+	Semicolon
IE が違う部分
Space	32	Spacebar
Escape	27	Esc
CapsLock	240	Unidentified
左Windows	91	Win
無変換	29	Nonconvert
ひらがな・カタカナ	242	Unidentified
右クリックメニュー	93	Apps
↑	38	Up
↓	40	Down
←	37	Left
→	39	Right
Delete	46	Del
ScrollLock	145	Scroll
Zenkaku	244	Unidentified
Hankaku	243	Unidentified

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

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


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

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