過去数バージョンの 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 Kachachacha 氏は、KeyboardEvent に関連するすべての属性を可視化する素晴らしいデモを作成しました。
クロスブラウザ サポート
この記事の執筆時点で、code 属性のサポートは、Chrome 48 以降、Opera 35 以降、Firefox 44 以降に限定されています。key 属性は、Firefox 44 以降、Chrome 51 以降、Opera 38 以降でサポートされますが、Internet Explorer 9 以降と Edge 13 以降で部分的にサポートされます。