Chrome の過去数バージョンで、KeyboardEvent に 2 つの追加が行われました。これは、keydown、keypress、keyup イベント リスナーに渡されるパラメータとして使用されます。code 属性（Chrome 48 で追加）と key 属性（Chrome 51 で追加）の両方を使用すると、従来の属性では困難な情報をデベロッパーが簡単に取得できます。
code 属性
まず、code 属性について説明します。これは、KeyboardEvent を生成するために押されたキーを表す文字列に設定されます。現在のキーボード レイアウト（QWERTY と Dvorak など）、ロケール（英語とフランス語など）、修飾キーは考慮されません。これは、押されたキーがどの文字に対応しているかではなく、どの物理キーが押されたかを把握したい場合に便利です。たとえば、ゲームを作成している場合、特定のキーセットを使用してプレーヤーをさまざまな方向に移動できます。このマッピングは、キーボードのレイアウトに依存しないことが理想的です。
鍵属性
次に、新しい key 属性があります。文字列に設定されますが、code が押された物理キーに関する情報を返すのに対し、key には、現在のキーボード レイアウト、言語 / 地域、修飾キーを考慮して、そのキーによって生成された文字が含まれます。key 属性の値を確認すると、ユーザーがテキスト入力に入力したかのように、画面に表示される文字を確認できます。
具体的にはどのような利点があるのでしょうか。
具体的な例として、ユーザーが QWERTY キーボード レイアウトの米国のキーボードを使用しているとします。そのキーボードの物理的な Q キーを押すと、code 属性が "KeyQ" に設定された KeyboardEvent が生成されます。これは、キーボードのレイアウトや他の修飾キーに関係なく当てはまります。比較のために、フランス語（AZERTY）キーボードでは、キートップに「a」と印字されている場合でも、このキーの code は "KeyQ" になります。同じ米国のキーボードで物理的な Q キーを押すと、通常は key が "q"（修飾キーなし）、"Q"（Shift または CapsLock あり）、"œ"（OS X で Alt あり）に設定された KeyboardEvent が生成されます。フランス語の AZERTY キーボードでは、同じキーで「a」（Shift キーまたは CapsLock キーを押すと「A」）が入力されます。他のキーボード レイアウトでは、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 以降では部分的にサポートされています。