Quale keycode per la chiave di escape con jQuery

Ho due funzioni. Quando viene premuto enter, le funzioni vengono eseguite correttamente, ma quando viene premuto escape non lo fa. Qual è il numero corretto per la chiave di escape?

$(document).keypress(function(e) { if (e.which == 13) $('.save').click(); // enter (works as expected) if (e.which == 27) $('.cancel').click(); // esc (does not work) }); 

Solutions Collecting From Web of "Quale keycode per la chiave di escape con jQuery"

Prova con l’ evento keyup :

 $(document).keyup(function(e) { if (e.keyCode === 13) $('.save').click(); // enter if (e.keyCode === 27) $('.cancel').click(); // esc }); 

Anziché codificare i valori del codice tasto nella tua funzione, considera l’utilizzo di costanti denominate per trasmettere meglio il tuo significato:

 var KEYCODE_ENTER = 13; var KEYCODE_ESC = 27; $(document).keyup(function(e) { if (e.keyCode == KEYCODE_ENTER) $('.save').click(); if (e.keyCode == KEYCODE_ESC) $('.cancel').click(); }); 

Alcuni browser (come FireFox, non sicuro di altri) definiscono un object KeyEvent globale che espone per te questi tipi di costanti. Questa domanda SO mostra un bel modo di definire quell’object anche in altri browser.

(Risposta estratta dal mio precedente commento )

È necessario utilizzare la keyup piuttosto che keypress . per esempio:

 $(document).keyup(function(e) { if (e.which == 13) $('.save').click(); // enter if (e.which == 27) $('.cancel').click(); // esc }); 

keypress non sembra essere gestito in modo coerente tra i browser (prova la demo su http://api.jquery.com/keypress in IE vs Chrome vs Firefox, a volte la keypress non si registra e i valori per entrambi “che” e ‘keyCode’ varia) mentre la keyup è coerente.

Poiché c’è stata una discussione su e.which vs e.keyCode : si noti che e.which è il valore normalizzato da jquery ed è quello raccomandato per l’uso:

La proprietà event.which normalizza event.keyCode ed event.charCode. Si raccomanda di guardare event.which per l’input da tastiera.

(da http://api.jquery.com/event.which/ )

Per trovare il codice chiave per qualsiasi tasto, utilizzare questa semplice funzione:

 document.onkeydown = function(evt) { console.log(evt.keyCode); } 

27 è il codice per la chiave di escape. 🙂

Prova il plugin jEscape ( scarica da google drive )

 $(document).escape(function() { alert('ESC button pressed'); }); 

o ottieni il codice di accesso per il browser incrociato

 var code = (e.keyCode ? e.keyCode : e.which); if (code === 27) alert('ESC'); if (code === 13) alert('ENTER'); 

forse puoi usare l’interruttore

 var code = (e.keyCode ? e.keyCode : e.which); switch (code) { case 27: alert('ESC'); break; case 13: alert('ENTER'); break; } 

La tua migliore scommessa è

 $(document).keyup(function(e) { if (e.which === 13) $('.save').click(); // enter if (e.which === 27) $('.cancel').click(); // esc /* OPTIONAL: Only if you want other elements to ignore event */ e.preventDefault(); e.stopPropagation(); }); 

Sommario

  • which è più preferibile rispetto a keyCode perché è normalizzato
  • keyup è più preferibile rispetto al keydown perché il keydown può verificarsi più volte se l’utente lo tiene premuto.
  • Non utilizzare la keypress meno che non si desideri acquisire i caratteri reali.

È interessante notare che Bootstrap utilizza keydown e keyCode nel suo componente a discesa (a partire dalla 3.0.2)! Penso che probabilmente sia una scelta scadente lì.

Snippet correlato da JQuery doc

Mentre i browser utilizzano proprietà diverse per memorizzare queste informazioni, jQuery normalizza la proprietà .which in modo da poterla usare in modo affidabile per recuperare il codice chiave. Questo codice corrisponde a un tasto sulla tastiera, inclusi i codici per i tasti speciali come le frecce. Per catturare l’effettiva immissione di testo, .keypress () potrebbe essere una scelta migliore.

Altro elemento di interesse: JavaScript Keypress Library

Per ottenere il codice esadecimale per tutti i personaggi: http://asciitable.com/

Il tuo codice funziona bene. È molto probabile che la finestra non sia focalizzata. Uso una funzione simile per chiudere le scatole di iframe ecc.

 $(document).ready(function(){ // Set focus setTimeout('window.focus()',1000); }); $(document).keypress(function(e) { // Enable esc if (e.keyCode == 27) { parent.document.getElementById('iframediv').style.display='none'; parent.document.getElementById('iframe').src='/views/view.empty.black.html'; } }); 

Stavo cercando di fare la stessa cosa e mi stava facendo schifo. In Firefox, sembra che se si tenta di fare alcune cose quando viene premuto il tasto Esc, continua l’elaborazione della chiave di escape che poi annulla ciò che si stava tentando di fare. Alert funziona bene. Ma nel mio caso, volevo tornare indietro nella storia che non ha funzionato. Alla fine ho capito che dovevo forzare la propagazione dell’evento per fermarsi come mostrato sotto …

 if (keyCode == 27) { history.back(); if (window.event) { // IE works fine anyways so this isn't really needed e.cancelBubble = true; e.returnValue = false; } else if (e.stopPropagation) { // In firefox, this is what keeps the escape key from canceling the history.back() e.stopPropagation(); e.preventDefault(); } return (false); } 

Per spiegare dove altre risposte non hanno; il problema è l’uso di keypress .

Forse l’evento ha solo un nome errato, ma la keypress è definita per sparare quando is being inserted when an actual character when an actual . Cioè testo
Mentre quello che vuoi è keydown / keyup , che si triggers quando (prima o dopo, rispettivamente) the user depresses a key . Cioè quelle cose sulla tastiera.

La differenza appare qui perché esc è un carattere di controllo (letteralmente ‘carattere non stampabile’) e quindi non scrive alcun testo, quindi nemmeno il keypress accensione.
enter è strano, perché anche se lo si utilizza come carattere di controllo (cioè per controllare l’interfaccia utente), sta ancora inserendo un carattere di nuova riga, che attiverà la keypress un keypress .

Fonte: quirksmode

Ho sempre usato keyup ed e.which per catturare la chiave di escape.

So che questa domanda sta chiedendo di jquery, ma per quelle persone che usano jqueryui, ci sono costanti per molti dei keycode:

 $.ui.keyCode.ESCAPE 

http://api.jqueryui.com/jQuery.ui.keyCode/

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('enter,esc', function(event,handler){ switch(handler.key){ case "enter":$('.save').click();break; case "esc":$('.cancel').click();break; } }); 

i tasti di scelta rapida comprendono i seguenti modificatori: , l’ opzione di spostamento ⌥ il comando di controllo alt ctrl e .

I seguenti tasti speciali possono essere utilizzati per le scorciatoie: scheda backspace , cancella , invio , ritorno , esc , escape , spazio , su , giù , sinistra , destra , home , fine , pageup , pagedown , del , delete e f1 a f19 .

e.keyCode semplicemente una risposta aggiornata rispetto a e.keyCode è considerato DEPRECATO su MDN .

Piuttosto dovresti optare per e.key che invece supporta nomi e.key per tutto. Ecco la copia della pasta in questione

 window.addEventListener("keydown", function (event) { if (event.defaultPrevented) { return; // Do nothing if the event was already processed } switch (event.key) { case "ArrowDown": // Do something for "down arrow" key press. break; case "ArrowUp": // Do something for "up arrow" key press. break; case "ArrowLeft": // Do something for "left arrow" key press. break; case "ArrowRight": // Do something for "right arrow" key press. break; case "Enter": // Do something for "enter" or "return" key press. break; case "Escape": // Do something for "esc" key press. break; default: return; // Quit when this doesn't handle the key event. } // Cancel the default action to avoid it being handled twice event.preventDefault(); }, true);