入力したキーボードのキーを取得する

キーボード操作を行ったときにJavaScriptで何らかの処理を行うとき、キーの判別をどのようにすればいいかで少し迷うことがあったので、調べたことをメモ。

サンプルコード

過去によく使われていた「event.keyCode」は非推奨になっているため、event.keyかevent.codeのどちらかを使用します。

event.keyの場合はユーザーの入力したキーの値を、event.codeの場合はユーザーの入力した物理的なキーを返します。
例えばキーボード上のEnterキーを押した場合、event.keyとevent.codeはどちらも「Enter」を返しますが、テンキーのEnterキーを押した場合、event.keyは「Enter」、event.codeは「NumpadEnter」を返します。

実際に挙動を試してみます。

document.body.addEventListener('keydown', function(event) {
  console.log('key:', event.key);
  console.log('code:', event.code);
});

event.keyとevent.codeの動作確認のデモページ

Windows環境でいくつか試してみた結果は以下の通りです。