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

90

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?

Jason210
quelle
3
.keywird in allen wichtigen Browser- Entwicklern unterstützt.mozilla.org
en-US/docs/Web/API/KeyboardEvent/…

Antworten:

29

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);
};
Miguel Lattuada
quelle
13
Ich habe das gelesen, aber es schien aus keinem anderen Grund eine Menge zusätzlichen Codes zu sein, als MDN gesagt hat, dass etwas veraltet ist, wenn es in allen gängigen Browsern tatsächlich gut funktioniert. Aber wenn das der richtige Weg ist, dann danke!
Jason210
3
Wow schau dir das an. caniuse.com/#search=keyCode (Diese KeyboardEvent-Eigenschaft wird effektiv in allen Browsern unterstützt (da IE6 +, Firefox 2+, Chrome 1+ usw. über .keyCode sprechen)
Miguel Lattuada
2
Das ist es, was an all dem so nervig ist. Alle gängigen Browser unterstützen keyCode, aber versuchen Sie, die empfohlene .key-Eigenschaft zu überprüfen, und verwenden Sie sie kaum!
Jason210
4
Ja, wir sind bis Ende Mai 2016 und Chrome hat endlich die KeyboardEvent.key-Eigenschaft implementiert. Safari und jeder mobile Browser müssen sich noch der Partei "16,5% aller Benutzer" anschließen. Leider codieren Microsoft Edge und Gecko einige der Ereignisse unterschiedlich, zum Beispiel: Das Schlüsselereignis für den Aufwärtspfeil wird als "Up" anstelle von "ArrowUp" codiert.
Joshua Dawson
Ich denke, dies wird Ihnen helfen, stackoverflow.com/questions/41465542/…
Maven97
26

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 .

user10089632
quelle
Ihre Lösung funktioniert in meinem Browser nicht (Windows 10, Chrome 60, belgische Tastatur). Erstens charCodeArrexistiert die Funktion nicht. Funktioniert auch charCodeAtnicht für alle Werte von e.key. Für den Schlüssel Enter/ Returnist beispielsweise der Wert der e.keyEigenschaft "Enter", und die Ausführung charCodeArrfür diese Zeichenfolge gibt den Wert zurück 69(der der ASCII-Code für das Zeichen ist E).
John Slegers
@ JohnSlegers, ja das war ein Tippfehler, ich meinte ein vom Benutzer erstelltes Array. Weitere Informationen finden Sie in meiner aktualisierten Antwort.
user10089632
19

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/
kumarharsh
quelle
Laut MDN werden weder Internet Explorer noch Edge unterstütztKeyboardEvent.code. Außerdem sind die Werte fürkeyundcodebrowserabhängig. Beide Probleme machenkeyundcodenicht praktisch in realen Anwendungen zu verwenden.
John Slegers
Wenn ich die Pfeiltasten, Seite hoch / runter, Home & End testen möchte, sollte ich keyoder verwenden code? Es ist im Allgemeinen ein physischer Schlüssel, kann aber auch von Num Lock und Layout abhängen ... Was ist die beste Vorgehensweise?
Jake
12

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);
Vicky Gonsalves
quelle
3
Leider keyist ein browserspezifischer Zeichenfolgenwert wie "Enter"oder "ArrowUp"und es gibt keine standardisierte Möglichkeit, ihn in den entsprechenden Code zu konvertieren. Sie benötigen also noch mehr Boilerplate-Code, um zwischen Schlüssel und Code zu konvertieren.
John Slegers
5

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

Anstatt

event.keyCode === 13

Mach es wie

event.key === 'Enter'
Thomas Gotwig
quelle