KeyboardEvent.keyCodeは非推奨です。これは実際にはどういう意味ですか？

Question 1

MDNによると、このプロパティは絶対に使用しないでください.keyCode。これは非推奨です。

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

W3スクールでは、この事実は軽視.keyCodeされ、互換性のためにのみ提供されており、DOMイベント仕様の最新バージョンでは、.key代わりにこのプロパティを使用することを推奨しているという副次的な注記があります。

問題は、それ.keyがブラウザーでサポートされていないことです。行方不明のものはありますか？

Question 2

共有したリンクに書かれているので、3つの方法で対処できます。

if (event.key !== undefined) {

} else if (event.keyIdentifier !== undefined) {

} else if (event.keyCode !== undefined) {

}

それらを熟考する必要があります。クロスブラウザのサポートが必要な場合は、これが正しい方法です。

このようなものを実装した方が簡単かもしれません。

var dispatchForCode = function(event, callback) {
  var code;

  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }

  callback(code);
};

Question 3

また、すべてのことのkeyCode、これは、charCodeはとkeyIdentifierは廃止されました：
charCodeとkeyIdentifier非標準の機能です。
keyIdentifierChrome 54以降では削除されており、Opera 41.0
keyCodeは、FFの通常の文字によるキープレスイベントで0を返します。

重要なプロパティ：

 readonly attribute DOMString key

押されたキーに対応するキー属性値を保持します

この記事の執筆時点では、このkeyプロパティは、Firefox 52、Chrome 55、Safari 10.1、Opera 46の時点ですべての主要なブラウザーでサポートされています。InternetExplorer 11を除きます。 非標準のキー識別子とAltGraphでの不正な動作。詳細
これが重要であるか、下位互換性がある場合は、次のコードのように機能検出を使用できます。

key値がkeyCodeやwhichプロパティとは異なることに注意してください。これには、コードではなくキーの名前が含まれています。プログラムで文字コードが必要な場合は、を利用できますcharCodeAt()。単一の印刷可能な文字の場合charCodeAt()、使用できるのは、ArrowUp チャンスのように値に複数の文字が含まれるキーを処理している場合です。特別なキーをテストして、それに応じてアクションを実行します。だから、キーの値とそれに対応するコードのテーブルを実装してみてくださいcharCodeArr["ArrowUp"]=38、charCodeArr["Enter"]=13、charCodeArr[Escape]=27...というように、見てください取るキー値とそれらに対応するコードを

if(e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        /* As @Leonid suggeted   */
        var characterCode = e.which || e.charCode || e.keyCode || 0;
    }
        /* ... code making use of characterCode variable  */

上位互換性を検討したい場合があります。つまり、レガシープロパティが利用可能であり、ドロップされた場合にのみ新しいプロパティに切り替えます。

if(e.which || e.charCode || e.keyCode ){
        var characterCode = e.which || e.charCode || e.keyCode;
    }else if (e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        var characterCode = 0;
    }

参照：KeyboardEvent.codeプロパティのドキュメントとこの回答の詳細。

Question 4

TLDR：私はあなたがすることをお勧めしたいはずです新しい使用event.keyとevent.codeプロパティの代わりに、従来のものを。IEとEdgeはこれらのプロパティをサポートしていますが、新しいキー名はまだサポートしていません。それらのために、標準のキー/コード名を出力させる小さなポリフィルがあります：

https://github.com/shvaikalesh/shim-keyboard-event-key

OPと同じMDN警告の理由を探して、この質問に行きました。さらに検索すると、問題keyCodeがより明確になります。

使用に関する問題keyCodeは、英語以外のキーボードでは異なる出力が生成され、レイアウトが異なるキーボードでも一貫性のない結果が生成される可能性があることです。加えて、

W3C仕様を読んだ場合：https ://www.w3.org/TR/uievents/#interface-keyboardevent

実際には、keyCodeとcharCodeは、プラットフォーム間で一貫性がなく、異なるオペレーティングシステムでの同じ実装でも、異なるローカリゼーションの使用でも一貫性がありません。

それは何が問題であったかを説明するいくつかの深さに入りますkeyCode：https : //www.w3.org/TR/uievents/#legacy-key-attributes

これらの機能は正式には指定されておらず、現在のブラウザの実装は大幅に異なります。ユーザーエージェントの検出とそれに応じた動作に依存するスクリプトライブラリを含む大量のレガシーコンテンツは、これらのレガシー属性とイベントを形式化しようとすると、修正または有効化するだけのコンテンツを破壊するリスクがあることを意味します。さらに、これらの属性は国際的な使用には適しておらず、アクセシビリティの問題にも対応していません。

したがって、レガシーのkeyCodeが置き換えられた理由を確認した後、今日何をする必要があるかを見てみましょう。

最新のブラウザはすべて、新しいプロパティ（keyおよびcode）をサポートしています。
IEとEdgeは古いバージョンの仕様をサポートしており、一部のキーには異なる名前が付いています。あなたはそれのためにシムを使うことができます：https：//github.com/shvaikalesh/shim-keyboard-event-key（またはあなた自身のものを転がしてください-それはとにかくかなり小さいです）
Edgeはこのバグを最新リリースで修正しました（おそらく2018年4月にリリースされる予定です）-https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
使用できるイベントキーのリストを参照してください：https : //www.w3.org/TR/uievents-key/

Question 5

MDNはすでにソリューションを提供しています。

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }

  var handled = false;
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key and set handled true.
  } else if (event.keyIdentifier !== undefined) {
    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
  } else if (event.keyCode !== undefined) {
    // Handle the event with KeyboardEvent.keyCode and set handled true.
  }

  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
}, true);

Question 6

たとえば、「Enter」キーがクリックされたかどうかを検出したい場合：

の代わりに

event.keyCode === 13

好きですか

event.key === 'Enter'