JavaScript keyCode ist veraltet. Was bedeutet das in der Praxis?

Question

Laut MDN sollten wir definitiv nicht die .keyCode-Eigenschaft verwenden. Es ist veraltet:

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

Auf w3 Schulen, diese Tatsache wird verharmlost und es gibt nur eine Randnotiz sagen, dass .keyCode nur für die Kompatibilität vorgesehen ist und dass die neueste Version der DOM-Event Spezifikation empfiehlt die Verwendung der .key Eigenschaft stattdessen.

Das Problem ist, dass .key nicht von Browsern unterstützt wird, also was sollten wir verwenden? Gibt es etwas, das mir fehlt?

Answer 1

Sie haben drei Möglichkeiten, es zu handhaben, da sie auf den Link geschrieben Ihnen geteilt.

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

Sie sie betrachten sollten, das ist der richtige Weg, wenn Sie Cross-Browser-Unterstützung möchten.

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

Answer 2

MDN hat bereits eine Lösung zur Verfügung gestellt:

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

Answer 3

tun, was ich tue. Es ist mir einfach egal. MDN kann sagen, dass es veraltet ist, aber wenn es keine Alternative (außer keyIdentifier) ​​gibt, müssen Sie die veraltete Version verwenden.

Answer 4

Darüber hinaus, dass alle keyCode, which, charCode und keyIdentifier sind veraltet:
charCode und keyIdentifier Funktionen Nicht-Standard sind.
keyIdentifier wird entfernt von Chrome 54 und Opera 41.0
keyCode gibt 0, auf Tastendruckereignis mit normalen Zeichen auf FF zurück.

The key property:

readonly attribute DOMString key 

hält einen Schlüssel Attributwert auf die entsprechende Taste gedrückt

Ab dem Zeitpunkt des Schreibens dieses Artikels, die key Eigenschaft wird von allen gängigen Browsern unterstützt ab : Firefox 52, Chrome 55, Safari 10.1, Opera 46. Mit Ausnahme von Internet Explorer 11 mit: Nicht-Standard-Schlüssel-IDs und falsches Verhalten mit AltG Raph.More info
Wenn das wichtig ist und/oder die Abwärtskompatibilität ist, dann können Sie Feature-Erkennung, wie im folgenden Code verwenden:

Beachten Sie, dass der key Wert unterscheidet sich von keyCode oder which Eigenschaften, dass: es enthält die Name des Schlüssels nicht sein Code. Wenn Ihr Programm Zeichencodes benötigt, können Sie charCodeAt() verwenden. Für einzelne druckbare Zeichen können Sie verwenden charCodeAt(), wenn Sie mit Schlüsseln, deren Werte mehrere Zeichen wie ArrowUp 0 Chancen sind: Sie testen für spezielle Schlü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, nehmen Sie bitte einen Blick auf Key Values und ihre corresponding 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 */ 

Mai werden Sie nach vorne betrachten wollen Kompatibilität dh die Legacy-Eigenschaften verwenden, während sie verfügbar sind, und nur, wenn der Schalter auf die neuen fiel:

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.