.keyCode vs. .which

Myślałem, że odpowiedź na to pytanie znajdzie się gdzieś na Stack Overflow, ale nie mogę tego znaleźć.

Jeśli oczekuję zdarzenia naciśnięcia klawisza, czy powinienem używać .keyCodelub .whichustalić, czy naciśnięto klawisz Enter?

Zawsze robiłem coś takiego:

$("#someid").keypress(function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    // do something
  }
});

Ale widzę przykłady, które używają .whichzamiast .keyCode. Co za różnica? Czy jedno jest bardziej przyjazne dla różnych przeglądarek niż drugie?

Uwaga: Odpowiedź poniżej została napisana w roku 2010. Tutaj wiele lat później, zarówno keyCodei whichsą przestarzałe na rzecz key(dla klucza logicznego) oraz code(w przypadku fizycznego umieszczenia klucza). Ale zauważ, że IE nie obsługuje code, a jego obsługa keyoparta jest na starszej wersji specyfikacji, więc nie jest całkiem poprawna. Gdy piszę to, obecny Edge oparty na EdgeHTML i Chakra też nie obsługuje code, ale Microsoft wprowadza na Blink - i V8 zamiennik Edge'a, który prawdopodobnie tak / będzie.

Niektóre przeglądarki używają keyCode, inne używają which.

Jeśli używasz jQuery, możesz niezawodnie używać, whichponieważ jQuery standaryzuje rzeczy ; Więcej tutaj.

Jeśli nie używasz jQuery, możesz to zrobić:

var key = 'which' in e ? e.which : e.keyCode;

Lub alternatywnie:

var key = e.which || e.keyCode || 0;

... która radzi sobie z taką e.whichewentualnością 0(przywracając ją 0na końcu za pomocą niezwykle potężnego ||operatora JavaScript ).

jQuery normalizuje się w event.whichzależności od tego event.which, event.keyCodeczy event.charCodejest obsługiwana przez przeglądarkę:

// Add which for key events
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
   event.which = event.charCode != null ? event.charCode : event.keyCode;
}

Dodatkową zaletą .whichjest to, że jQuery robi to również dla kliknięć myszką:

// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button !== undefined ) {
    event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
}

Jeśli korzystasz z waniliowego Javascript, pamiętaj, że keyCode jest już nieaktualny i zostanie usunięty:

Ta funkcja została usunięta ze standardów internetowych. Chociaż niektóre przeglądarki mogą go obsługiwać, jest on w trakcie usuwania. Unikaj go i aktualizuj istniejący kod, jeśli to możliwe; zapoznaj się z tabelą kompatybilności na dole tej strony, aby podjąć decyzję. Pamiętaj, że ta funkcja może przestać działać w dowolnym momencie

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

Zamiast tego użyj: .key lub .code w zależności od pożądanego zachowania: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en -US / docs / Web / API / KeyboardEvent / key

Oba są zaimplementowane w nowoczesnych przeglądarkach.

spójrz na to: https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

W przypadku naciśnięcia klawisza wartość Unicode wciśniętego klawisza jest przechowywana we właściwości keyCode lub charCode, nigdy w obu przypadkach. Jeśli naciśnięty klawisz generuje znak (np. „A”), charCode jest ustawiany na kod tego znaku, z uwzględnieniem wielkości liter. (tzn. charCode bierze pod uwagę, czy klawisz Shift jest wciśnięty). W przeciwnym razie kod naciśniętego klawisza jest zapisywany w keyCode. keyCode jest zawsze ustawiany w zdarzeniach keydown i keyup. W takich przypadkach charCode nigdy nie jest ustawiony. Aby uzyskać kod klucza, niezależnie od tego, czy został zapisany w keyCode czy charCode, zapytaj, która właściwość. Znaki wprowadzone za pomocą edytora IME nie rejestrują się za pomocą keyCode ani charCode.

Polecam event.keyobecnie. Dokumenty MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

event.KeyCodei event.whichoba mają nieprzyjemne przestarzałe ostrzeżenia na górze swoich stron MDN:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode https://developer.mozilla.org/en-US / docs / Web / API / KeyboardEvent / which

W przypadku klawiszy alfanumerycznych event.keywydaje się być implementowany identycznie we wszystkich przeglądarkach. W przypadku klawiszy sterujących (tab, enter, escape itp.) event.keyMa tę samą wartość w Chrome / FF / Safari / Opera, ale inną wartość w IE10 / 11 / Edge (IE najwyraźniej używają starszej wersji specyfikacji, ale pasują do siebie, ponieważ z 14 stycznia 2018 r.).

W przypadku klawiszy alfanumerycznych czek wyglądałby następująco:

event.key === 'a'

W przypadku znaków kontrolnych musisz zrobić coś takiego:

event.key === 'Esc' || event.key === 'Escape'

Użyłem tutaj tego przykładu do testowania na wielu przeglądarkach (musiałem otworzyć w codepen i edytować, aby uruchomić go z IE10): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ kod

event.code jest wymieniony w innej odpowiedzi jako możliwość, ale IE10 / 11 / Edge nie implementuje go, więc nie działa, jeśli chcesz obsługi IE.

Solidna biblioteka JavaScript do przechwytywania danych z klawiatury i wprowadzonych kombinacji klawiszy. Nie ma zależności.

http://jaywcjlove.github.io/hotkeys/

hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
    switch(handler.key){
        case "ctrl+a":alert('you pressed ctrl+a!');break;
        case "ctrl+b":alert('you pressed ctrl+b!');break;
        case "r":alert('you pressed r!');break;
        case "f":alert('you pressed f!');break;
    }
});

Klawisze skrótu rozumie następujących wyrażeń: ⇧, shift, option, ⌥, alt, ctrl, control, command, i ⌘.

Następujące klawisze specjalne mogą być wykorzystywane do skrótów: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deletei f1dzięki f19.

W przeglądarce Firefox właściwość keyCode nie działa w przypadku zdarzenia onkeypress (zwraca tylko 0). W przypadku rozwiązania dla różnych przeglądarek użyj właściwości what wraz z keyCode, np .:

var x = event.which || event.keyCode;  // Use either which or keyCode, depending on browser support