.keyCode vs. .which

Ho pensato che questo avrebbe avuto risposta da qualche parte su Stack Overflow, ma non riesco a trovarlo.

Se sto ascoltando un evento di pressione dei tasti, dovrei utilizzare .keyCodeo .whichper determinare se è stato premuto il tasto Invio?

Ho sempre fatto qualcosa di simile al seguente:

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

Ma vedo esempi che usano .whichinvece di .keyCode. Qual è la differenza? Uno è più cross-browser amichevole rispetto all'altro?

Nota: la risposta di seguito è stata scritta nel 2010. Qui, molti anni dopo, entrambi keyCodee whichsono deprecati a favore di key(per la chiave logica) e code(per il posizionamento fisico della chiave). Ma nota che IE non supporta codee il suo supporto keyè basato su una versione precedente delle specifiche, quindi non è del tutto corretto. Mentre scrivo questo, l'attuale Edge basato su EdgeHTML e Chakra non supporta codeneanche, ma Microsoft sta implementando la sua sostituzione Blink - e V8 - per Edge, che presumibilmente fa / volontà.

Alcuni browser usano keyCode, altri usano which.

Se stai usando jQuery, puoi usarlo in modo affidabile whichpoiché jQuery standardizza le cose ; Più qui

Se non stai usando jQuery, puoi farlo:

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

O in alternativa:

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

... che gestisce la possibilità che e.whichpotrebbe essere 0(ripristinandola 0alla fine, utilizzando l' ||operatore curiosamente potente di JavaScript ).

jQuery normalizza event.whicha seconda se event.which, event.keyCodeo event.charCodeè supportato dal browser:

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

Un ulteriore vantaggio .whichè che jQuery lo fa anche per i clic del mouse:

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

Se rimani in Javascript vanilla, tieni presente che keyCode è ora obsoleto e verrà eliminato:

Questa funzione è stata rimossa dagli standard Web. Sebbene alcuni browser possano ancora supportarlo, è in procinto di essere eliminato. Evita di usarlo e aggiorna il codice esistente se possibile; vedere la tabella di compatibilità in fondo a questa pagina per guidare la tua decisione. Tieni presente che questa funzione potrebbe smettere di funzionare in qualsiasi momento

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

Utilizzare invece: .key o .code in base al comportamento desiderato: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en -US / docs / Web / API / KeyboardEvent / chiave

Entrambi sono implementati su browser moderni.

guarda questo: https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

In un evento keypress, il valore Unicode del tasto premuto viene memorizzato nella proprietà keyCode o charCode, mai entrambe. Se il tasto premuto genera un carattere (ad es. 'A'), charCode viene impostato sul codice di quel carattere, rispettando il maiuscolo / minuscolo. (ad es. charCode tiene conto del fatto che il tasto shift è tenuto premuto). Altrimenti, il codice del tasto premuto viene memorizzato in keyCode. keyCode è sempre impostato negli eventi keydown e keyup. In questi casi, charCode non è mai impostato. Per ottenere il codice della chiave indipendentemente dal fatto che sia stata memorizzata in keyCode o charCode, richiedere quale proprietà. I caratteri immessi tramite un IME non si registrano tramite keyCode o charCode.

Consiglierei al event.keymomento. Documenti MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

event.KeyCodeed event.whichentrambi hanno cattivi avvisi deprecati nella parte superiore delle loro pagine MDN:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode https://developer.mozilla.org/en-US / docs / Web / API / KeyboardEvent / che

Per le chiavi alfanumeriche, event.keysembra essere implementato in modo identico in tutti i browser. Per i tasti di controllo (tab, enter, escape, ecc.), event.keyHa lo stesso valore su Chrome / FF / Safari / Opera ma un valore diverso in IE10 / 11 / Edge (apparentemente gli IE utilizzano una versione precedente delle specifiche ma si corrispondono tra loro come del 14 gennaio 2018).

Per i tasti alfanumerici un segno di spunta sarebbe simile a:

event.key === 'a'

Per i personaggi di controllo dovresti fare qualcosa del tipo:

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

Ho usato l'esempio qui per testare su più browser (ho dovuto aprire in codepen e modificarlo per farlo funzionare con IE10): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ codice

event.code è menzionato in una risposta diversa come possibilità, ma IE10 / 11 / Edge non la implementano, quindi è disponibile se si desidera il supporto IE.

Una robusta libreria Javascript per acquisire input da tastiera e combinazioni di tasti immessi. Non ha dipendenze.

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

tasti di scelta rapida comprende i seguenti modificatori: ⇧, shift, option, ⌥, alt, ctrl, control, command, e ⌘.

I tasti speciali seguenti possono essere usati per i collegamenti: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deletee f1attraverso f19.

In Firefox, la proprietà keyCode non funziona sull'evento onkeypress (restituirà solo 0). Per una soluzione cross-browser, utilizzare la proprietà which insieme a keyCode, ad esempio:

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