KeyboardEvent.keyCode jest przestarzały. Co to oznacza w praktyce?

Według MDN zdecydowanie nie powinniśmy korzystać z .keyCodenieruchomości. Jest przestarzały:

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

W szkole W3 ten fakt jest pomniejszony i jest tylko uwaga poboczna, która mówi, że .keyCodejest dostarczana tylko dla kompatybilności i że najnowsza wersja specyfikacji DOM Events zaleca używanie .keyzamiast tego właściwości.

Problem polega na tym, że .keynie jest to obsługiwane przez przeglądarki, więc czego powinniśmy użyć? Czy jest coś, czego mi brakuje?

Masz trzy sposoby, aby sobie z tym poradzić, ponieważ jest to napisane w udostępnionym linku.

if (event.key !== undefined) {

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

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

}

powinieneś się nad nimi zastanowić, to właściwy sposób, jeśli chcesz obsługiwać różne przeglądarki.

Może być łatwiej, jeśli zaimplementujesz coś takiego.

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

Ponadto wszystkie elementy keyCode , które , charCode i keyIdentifier są przestarzałe:
charCodei keyIdentifiersą funkcjami niestandardowymi.
keyIdentifierjest usuwany od Chrome 54, a Opera 41.0
keyCodezwraca 0 po zdarzeniu keypress z normalnymi znakami na FF.

Kluczowa właściwość :

 readonly attribute DOMString key

Przechowuje wartość atrybutu klawisza odpowiadającą naciśniętemu klawiszowi

W chwili pisania tego tekstu keywłaściwość jest obsługiwana przez wszystkie główne przeglądarki od: Firefox 52, Chrome 55, Safari 10.1, Opera 46. Z wyjątkiem Internet Explorera 11, który ma: niestandardowe identyfikatory kluczy i nieprawidłowe działanie z AltGraph. Więcej informacji
Jeśli jest to ważne i / lub zgodność ze starszymi wersjami, możesz użyć wykrywania funkcji, jak w poniższym kodzie:

Zauważ, że keywartość różni się od keyCodelub whichproperties tym, że: zawiera nazwę klucza, a nie jego kod. Jeśli twój program potrzebuje kodów znaków, możesz skorzystać z charCodeAt(). W przypadku pojedynczych drukowalnych znaków, których możesz użyć charCodeAt(), jeśli masz do czynienia z kluczami, których wartości zawierają wiele znaków, takich jak ArrowUp szanse: testujesz klucze specjalne i odpowiednio wykonujesz działania. Więc spróbuj wykonawczych tabelę wartości Keys i odpowiadające im kody charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13, charCodeArr[Escape]=27... i tak dalej, proszę spojrzeć na wartości kluczy i ich odpowiednimi kodami

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

Być może zechcesz rozważyć zgodność z poprzednimi wersjami, tj. Używać starszych właściwości, gdy są dostępne, i tylko wtedy, gdy zostaną upuszczone, przełącz się na nowe:

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

Zobacz także: dokumentacjęKeyboardEvent.code nieruchomości i więcej szczegółów w tej odpowiedzi .

TLDR: Sugeruję, że należy użyć nowego event.keyi event.codewłaściwości zamiast tych starszych. IE i Edge obsługują te właściwości, ale nie obsługują jeszcze nowych nazw kluczy. Dla nich jest mały polyfill, który sprawia, że ​​wyświetlają standardowe nazwy kluczy / kodów:

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

Doszedłem do tego pytania, szukając przyczyny tego samego ostrzeżenia MDN co OP. Po dłuższych poszukiwaniach problem z keyCode:

Problem z używaniem keyCodepolega na tym, że klawiatury inne niż angielskie mogą generować różne wyniki, a nawet klawiatury z różnymi układami mogą dawać niespójne wyniki. Poza tym był przypadek

Jeśli przeczytałeś specyfikację W3C: https://www.w3.org/TR/uievents/#interface-keyboardevent

W praktyce keyCode i charCode są niespójne na różnych platformach, a nawet w tej samej implementacji w różnych systemach operacyjnych lub przy użyciu różnych lokalizacji.

Zagłębia się w opis problemu keyCode: https://www.w3.org/TR/uievents/#legacy-key-attributes

Funkcje te nigdy nie zostały formalnie określone, a obecne implementacje przeglądarek różnią się w znaczący sposób. Duża ilość starszych treści, w tym bibliotek skryptów, które polegają na wykrywaniu klienta użytkownika i odpowiednim działaniu, oznacza, że ​​każda próba sformalizowania tych starszych atrybutów i zdarzeń grozi uszkodzeniem takiej ilości treści, jaką naprawiłaby lub włączyła. Ponadto atrybuty te nie nadają się do użytku międzynarodowego ani nie rozwiązują problemów związanych z dostępnością.

Tak więc, po ustaleniu powodu, dla którego starsza wersja keyCode została zastąpiona, spójrzmy, co musisz zrobić dzisiaj:

1. Wszystkie nowoczesne przeglądarki obsługują nowe właściwości ( keyi code).
2. IE i Edge obsługują starszą wersję specyfikacji, która ma inne nazwy dla niektórych kluczy. Możesz użyć do tego podkładki: https://github.com/shvaikalesh/shim-keyboard-event-key (lub skręć własną - i tak jest raczej mała)
3. Edge naprawił ten błąd w najnowszej wersji (prawdopodobnie zostanie wydana w kwietniu 2018) - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
4. Zapoznaj się z listą kluczy zdarzeń, których możesz użyć: https://www.w3.org/TR/uievents-key/

MDN dostarczyło już rozwiązanie:

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

Na przykład, jeśli chcesz wykryć, czy został kliknięty przycisk „Enter”, czy nie:

Zamiast

event.keyCode === 13

Zrób to jak

event.key === 'Enter'