web-dev-qa-db-ja.com

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

MDNによると、最も確実にnot.keyCodeプロパティを使用する必要があります。非推奨です：

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

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

問題は、.keyがブラウザでサポートされていないことです。そのため、何を使用する必要がありますか？私が見逃しているものはありますか？

javascriptkeydeprecatedkeycode
72
Jason210

あなたが共有したリンクに書かれているように、あなたはそれを扱う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);
};
21
Miguel Lattuada

さらに、すべての keyCode 、 which 、 charCode 、および keyIdentifier は非推奨です：
charCodeおよびkeyIdentifierは非標準の機能です。
keyIdentifierはChrome 54およびOpera 41.0から削除されます
keyCodeは、FFの通常の文字でキーを押すイベントで0を返します。

キープロパティ ：

 readonly attribute DOMString key

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

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

keyvalueがkeyCodeまたはwhichプロパティと異なることに注意してください。コードではなくキーの名前が含まれています。プログラムで文字のコードが必要な場合は、charCodeAt()を使用できます。単一の印刷可能文字の場合、値に複数の文字が含まれるキーを扱う場合は、charCodeAt()を使用できます ArrowUp 可能性は次のとおりです。特別なキーをテストしており、それに応じてアクションを実行します。キーの値と対応するコードのテーブルを実装してみてくださいcharCodeArr["ArrowUp"]=38、charCodeArr["Enter"]=13、charCodeArr[Escape]=27...など、 Key Values をご覧ください=およびその 対応するコード

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プロパティ docs およびこれに関する詳細 answer 。

23
user10089632

TLDR：レガシープロパティの代わりに新しいevent.keyおよびevent.codeプロパティを使用するshouldをお勧めします。 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はプラットフォーム間でinconsistentであり、異なるオペレーティングシステムまたは異なるローカリゼーションを使用した同じ実装ですらあります。

keyCodeの何が問題であったかを詳しく説明します。 https://www.w3.org/TR/uievents/#legacy-key-attributes

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

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

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

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);
10
Vicky Gonsalves