Według MDN zdecydowanie nie powinniśmy korzystać z .keyCode
nieruchomoś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 .keyCode
jest dostarczana tylko dla kompatybilności i że najnowsza wersja specyfikacji DOM Events zaleca używanie .key
zamiast tego właściwości.
Problem polega na tym, że .key
nie jest to obsługiwane przez przeglądarki, więc czego powinniśmy użyć? Czy jest coś, czego mi brakuje?
javascript
key
deprecated
keycode
Jason210
źródło
źródło
.key
jest obsługiwany we wszystkich głównych programistachOdpowiedzi:
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); };
źródło
Ponadto wszystkie elementy keyCode , które , charCode i keyIdentifier są przestarzałe:
charCode
ikeyIdentifier
są funkcjami niestandardowymi.keyIdentifier
jest usuwany od Chrome 54, a Opera 41.0keyCode
zwraca 0 po zdarzeniu keypress z normalnymi znakami na FF.Kluczowa właściwość :
W chwili pisania tego tekstu
key
wł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 informacjiJeśli jest to ważne i / lub zgodność ze starszymi wersjami, możesz użyć wykrywania funkcji, jak w poniższym kodzie:
Zauważ, że
key
wartość różni się odkeyCode
lubwhich
properties tym, że: zawiera nazwę klucza, a nie jego kod. Jeśli twój program potrzebuje kodów znaków, możesz skorzystać zcharCodeAt()
. 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 kodycharCodeArr["ArrowUp"]=38
,charCodeArr["Enter"]=13
,charCodeArr[Escape]=27
... i tak dalej, proszę spojrzeć na wartości kluczy i ich odpowiednimi kodamiif(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 .źródło
charCodeArr
funkcja nie istnieje. PonadtocharCodeAt
nie działa dla wszystkich wartoście.key
. Na przykład dla klawiszaEnter
/Return
wartościąe.key
właściwości jest"Enter"
, a wykonaniecharCodeArr
dla tego ciągu zwraca wartość69
(która jest kodem ASCII znakuE
).TLDR: Sugeruję, że należy użyć nowego
event.key
ievent.code
wł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
keyCode
polega 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ł przypadekJeśli przeczytałeś specyfikację W3C: https://www.w3.org/TR/uievents/#interface-keyboardevent
Zagłębia się w opis problemu
keyCode
: https://www.w3.org/TR/uievents/#legacy-key-attributesTak więc, po ustaleniu powodu, dla którego starsza wersja keyCode została zastąpiona, spójrzmy, co musisz zrobić dzisiaj:
key
icode
).źródło
KeyboardEvent.code
. Ponadto wartościkey
icode
zależą od przeglądarki. Zarówno kwestie, jakkey
icode
niepraktyczne do wykorzystania w rzeczywistych zastosowaniach.key
lubcode
? Zwykle jest to klucz fizyczny, ale może też zależeć od Num Lock i układu ... Jaka jest najlepsza praktyka?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);
źródło
key
jest to wartość ciągu charakterystyczna dla przeglądarki, taka jak"Enter"
lub,"ArrowUp"
i nie ma znormalizowanego sposobu konwersji jej na odpowiedni kod. więc będziesz potrzebować jeszcze więcej standardowego kodu do konwersji między kluczem a kodem.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'
źródło