.keyCode vs. .which

Ho pensato che sarebbe stato risposto da qualche parte su Stack Overflow, ma non riesco a trovarlo.

Se sto ascoltando un evento .keyCode , dovrei usare .keyCode o .keyCode per 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 sto vedendo esempi che usano .keyCode invece di .keyCode . Qual è la differenza? È più amichevole di più browser rispetto all’altro?

Alcuni browser usano keyCode , altri usano which . Se stai usando jQuery, puoi usare in modo affidabile which jQuery standardizza le cose . Altro qui.


Se non stai usando jQuery, puoi farlo:

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

O alternativamente:

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

… che gestisce la possibilità che e.which possa essere 0 (ripristinando quello 0 alla fine, usando l’operatore || curiosamente potente di JavaScript ).

jQuery normalizza l’ event.which dipende dal fatto che event.which , event.keyCode o 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 di .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 ti trovi su vanilla Javascript, tieni presente che keyCode è ora obsoleto e verrà eliminato:

Questa funzionalità è stata rimossa dagli standard Web. Sebbene alcuni browser possano ancora supportarlo, è in fase di rilascio. Evita di usarlo e aggiorna il codice esistente, se ansible; vedi la tabella di compatibilità in fondo a questa pagina per guidare la tua decisione. Essere consapevoli del fatto 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 a seconda del 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 di pressione tasto, 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 è impostato sul codice di quel carattere, rispettando la lettera maiuscola. (es. charCode prende in considerazione se si tiene premuto il tasto shift). In caso contrario, il codice del tasto premuto viene memorizzato in keyCode. keyCode è sempre impostato negli eventi keydown e keyup. In questi casi, charCode non viene mai impostato. Per ottenere il codice della chiave indipendentemente dal fatto che sia stato memorizzato in keyCode o charCode, interrogare la proprietà. I caratteri immessi tramite un IME non si registrano tramite keyCode o charCode.

Una robusta libreria Javascript per catturare l’input da tastiera e le combinazioni di tasti inserite. 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; } }); 

i tasti di scelta rapida comprendono i seguenti modificatori: , shift , option , , alt , ctrl , control , command e .

I seguenti tasti speciali possono essere usati per le scorciatoie: backspace , tab , clear , enter , return , esc , escape , space , up , down , left , right , home , end , pagedown , pagedown , del , delete e da f1 a f19 .

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

event.KeyCode ed event.which entrambi hanno avvertimenti deprecati sgradevoli 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/which

Per le chiavi alfanumeriche, event.key sembra essere implementato in modo identico su tutti i browser. Per i tasti di controllo (scheda, event.key , uscita, ecc.), event.key ha lo stesso valore su Chrome / FF / Safari / Opera ma un valore diverso in IE10 / 11 / Edge (IE apparentemente utilizza una versione precedente della specifica ma corrisponde a partire dal 14 gennaio 2018).

Per i tasti alfanumerici un assegno sarebbe simile a:

 event.key === 'a' 

Per i personaggi di controllo devi 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 modificare per farlo funzionare con IE10): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ codice

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

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

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