KeyboardEvent.keyCode veraltet. Was bedeutet das in der Praxis?

Außerdem sind alle von keyCode , which , charCode und keyIdentifier veraltet :
charCode und keyIdentifier sind keine Standardfunktionen.
keyIdentifier wird ab Chrome 54 und Opera 41.0
keyCode gibt bei einem Tastendruckereignis 0 mit normalen Zeichen auf FF zurück.

Die Schlüsseleigenschaft :

 readonly attribute DOMString key

Enthält einen Tastenattributwert, der der gedrückten Taste entspricht

Zum jetzigen Zeitpunkt wird die Eigenschaft key von allen gängigen Browsern unterstützt, ab: Firefox 52, Chrome 55, Safari 10.1, Opera 46. Ausgenommen Internet Explorer 11 mit: nicht standardmäßigen Schlüsselkennungen und falschem Verhalten mit AltGraph. Weitere Informationen
Wenn dies wichtig und/oder abwärtskompatibel ist, können Sie die Feature-Erkennung wie im folgenden Code verwenden:

Beachten Sie, dass sich der Wert von key von den Eigenschaften keyCode oder which darin unterscheidet, dass er den Namen des Schlüssels und nicht seinen Code enthält. Wenn Ihr Programm Zeichencodes benötigt, können Sie charCodeAt() verwenden. Für einzelne druckbare Zeichen können Sie charCodeAt() verwenden, wenn Sie mit Schlüsseln arbeiten, deren Werte wie mehrere Zeichen enthalten ArrowUp Die Chancen stehen gut, dass Sie nach speziellen Schlüsseln suchen und entsprechende Maßnahmen ergreifen. Versuchen Sie also, eine Tabelle mit Schlüsselwerten und den entsprechenden Codes charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13, charCodeArr[Escape]=27 Usw. zu implementieren. Schauen Sie sich bitte Key an Werte und ihre entsprechenden Codes

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  */  

Vielleicht möchten Sie die Aufwärtskompatibilität in Betracht ziehen, indem Sie die alten Eigenschaften verwenden, solange sie verfügbar sind, und nur dann, wenn Sie sie fallen lassen, zu den neuen wechseln:

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;
    }

Siehe auch: die KeyboardEvent.code - Eigenschaft docs und einige weitere Details in dieser answer .

TLDR: Ich würde vorschlagen, dass Sie sollten das neue event.key und event.code Eigenschaften anstelle der alten. IE und Edge unterstützen diese Eigenschaften, unterstützen die neuen Schlüsselnamen jedoch noch nicht. Für sie gibt es eine kleine Polyfill, mit der sie die Standardschlüssel-/Codenamen ausgeben:

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

Ich kam auf diese Frage und suchte nach dem Grund für die gleiche MDN-Warnung wie bei OP. Nach weiteren Suchen wird das Problem mit keyCode klarer:

Das Problem bei der Verwendung von keyCode besteht darin, dass nicht-englische Tastaturen unterschiedliche Ausgaben erzeugen können und sogar Tastaturen mit unterschiedlichen Layouts inkonsistente Ergebnisse erzeugen können. Außerdem gab es den Fall von

Wenn Sie die W3C-Spezifikation lesen: https://www.w3.org/TR/uievents/#interface-keyboardevent

In der Praxis sind keyCode und charCode inkonsistent plattformübergreifend und sogar dieselbe Implementierung auf verschiedenen Betriebssystemen oder unter Verwendung verschiedener Lokalisierungen.

Es wird eingehend beschrieben, was mit keyCode nicht stimmte: https://www.w3.org/TR/uievents/#legacy-key-attributes

Diese Funktionen wurden nie offiziell spezifiziert, und die aktuellen Browser-Implementierungen variieren erheblich. Die große Menge an älteren Inhalten, einschließlich Skriptbibliotheken, die darauf angewiesen sind, den Benutzeragenten zu erkennen und entsprechend zu handeln, bedeutet, dass jeder Versuch, diese älteren Attribute und Ereignisse zu formalisieren, die Gefahr birgt, so viele Inhalte zu beschädigen, wie sie reparieren oder aktivieren würden. Darüber hinaus sind diese Attribute nicht für den internationalen Gebrauch geeignet und berücksichtigen auch nicht die Probleme mit der Barrierefreiheit.

Nachdem Sie den Grund für das Ersetzen des alten keyCode ermittelt haben, schauen wir uns an, was Sie heute tun müssen:

1. Alle modernen Browser unterstützen die neuen Eigenschaften (key und code).
2. IE und Edge unterstützen eine ältere Version der Spezifikation, die für einige Schlüssel unterschiedliche Namen hat. Sie können ein Shim dafür verwenden: https://github.com/shvaikalesh/shim-keyboard-event-key (oder rollen Sie Ihr eigenes - es ist sowieso ziemlich klein)
3. Edge hat diesen Fehler in der neuesten Version behoben (wird voraussichtlich im April 2018 veröffentlicht) - https://developer.Microsoft.com/en-us/Microsoft-Edge/platform/issues/8860571/
4. Beziehen Sie sich auf die Liste der Ereignistasten, die Sie verwenden können: https://www.w3.org/TR/uievents-key/

MDN hat bereits eine Lösung bereitgestellt:

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);