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

Laut MDN sollten wir die Immobilie definitiv nicht nutzen .keyCode. Es ist veraltet:

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

In der W3-Schule wird diese Tatsache heruntergespielt, und es gibt nur eine Randnotiz, die besagt, dass .keyCodesie nur aus Kompatibilitätsgründen bereitgestellt wird und dass die neueste Version der DOM-Ereignisspezifikation die Verwendung der .keyEigenschaft empfiehlt .

Das Problem ist, dass .keydies von Browsern nicht unterstützt wird. Was sollten wir also verwenden? Fehlt mir etwas?

Sie haben drei Möglichkeiten, damit umzugehen, da dies auf dem von Ihnen freigegebenen Link steht.

if (event.key !== undefined) {

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

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

}

Sie sollten sie in Betracht ziehen, das ist der richtige Weg, wenn Sie browserübergreifende Unterstützung wünschen.

Es könnte einfacher sein, wenn Sie so etwas implementieren.

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

Darüber hinaus , dass alle keyCode , die , charCode und keyIdentifier sind veraltet:
charCodeund keyIdentifiersind Nicht-Standard - Funktionen.
keyIdentifierwird ab Chrome 54 entfernt und Opera 41.0
keyCodegibt bei einem Tastendruckereignis mit normalen Zeichen in FF 0 zurück.

Die Schlüsseleigenschaft :

 readonly attribute DOMString key

Enthält einen Schlüsselattributwert, der der gedrückten Taste entspricht

Zum Zeitpunkt dieses Schreibens wird die keyEigenschaft von allen gängigen Browsern ab Firefox 52, Chrome 55, Safari 10.1, Opera 46 unterstützt. Mit Ausnahme von 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 Funktionserkennung wie im folgenden Code verwenden:

Beachten Sie, dass sich der keyWert von keyCodeoder den whichEigenschaften darin unterscheidet: Er enthält den Namen des Schlüssels und nicht seinen Code. Wenn Ihr Programm Zeichencodes benötigt, können Sie diese verwenden charCodeAt(). Für einzelne druckbare Zeichen können Sie verwenden charCodeAt(), wenn Sie mit Schlüsseln arbeiten, deren Werte mehrere Zeichen enthalten, wie es ArrowUp wahrscheinlich ist: Sie testen auf Sonderschlüssel und ergreifen entsprechende Maßnahmen. So versuchen , eine Tabelle von Schlüsseln Werte der Umsetzung und ihre entsprechenden Codes charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13, charCodeArr[Escape]=27... und so weiter, bitte einen Blick auf nehmen Schlüsselwerte 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  */  

Möglicherweise möchten Sie die Vorwärtskompatibilität in Betracht ziehen, dh die Legacy-Eigenschaften verwenden, solange sie verfügbar sind, und nur dann, wenn sie gelöscht werden, 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.codeEigenschaft docs und einige weitere Details in dieser Antwort .

TLDR: Ich würde vorschlagen , dass Sie sollten die neue Verwendung event.keyund event.codeEigenschaften anstelle der Erbe diejenigen. IE und Edge unterstützen diese Eigenschaften, unterstützen jedoch noch nicht die neuen Schlüsselnamen. Für sie gibt es eine kleine Polyfüllung, mit der sie die Standardschlüssel- / Codenamen ausgeben können:

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

Ich kam zu dieser Frage und suchte nach dem Grund der gleichen MDN-Warnung wie OP. Nach einer weiteren Suche wird das Problem mit keyCodeklarer:

Das Problem bei der Verwendung keyCodebesteht darin, dass nicht englische Tastaturen unterschiedliche Ausgaben erzeugen können und selbst Tastaturen mit unterschiedlichen Layouts zu inkonsistenten Ergebnissen führen können. Plus, da war der Fall von

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

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

Es wird ausführlich beschrieben, was falsch war keyCode: 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 Legacy-Inhalten, einschließlich Skriptbibliotheken, die darauf beruht, den Benutzeragenten zu erkennen und entsprechend zu handeln, bedeutet, dass jeder Versuch, diese Legacy-Attribute und -Ereignisse zu formalisieren, das Risiko birgt, so viel Content zu beschädigen, wie er reparieren oder aktivieren würde. Darüber hinaus sind diese Attribute weder für die internationale Verwendung geeignet noch berücksichtigen sie Zugänglichkeitsprobleme.

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

1. Alle modernen Browser unterstützen die neuen Eigenschaften ( keyund code).
2. IE und Edge unterstützen eine ältere Version der Spezifikation, die für einige Schlüssel unterschiedliche Namen hat. Sie können dafür eine Unterlegscheibe verwenden: https://github.com/shvaikalesh/shim-keyboard-event-key (oder Ihre eigene rollen - es ist sowieso ziemlich klein)
3. Edge hat diesen Fehler in der neuesten Version behoben (voraussichtlich im April 2018 veröffentlicht) - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
4. Weitere Informationen finden Sie in der Liste der Ereignisschlüssel, 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);

Wenn Sie beispielsweise feststellen möchten, ob auf die Eingabetaste geklickt wurde oder nicht:

Anstatt

event.keyCode === 13

Mach es wie

event.key === 'Enter'