Quale codice chiave per chiave di escape con jQuery

Ho due funzioni. Quando si preme Invio, le funzioni vengono eseguite correttamente, ma quando si preme Esc non funziona. 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)
});

Prova con l' evento keyup :

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

Invece di hardcode i valori del keycode nella tua funzione, considera l'utilizzo di costanti nominate 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, incerto su altri) definiscono un KeyEventoggetto globale che espone questi tipi di costanti per te. Questa domanda SO mostra un modo carino di definire quell'oggetto anche in altri browser.

(Risposta estratta dal mio commento precedente )

Devi usare keyuppiuttosto che keypress. per esempio:

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

keypressnon 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 keypressnon si registra e i valori sia per "che" che per " keyCode 'variano) mentre keyupè coerente.

Dato che c'è stata qualche discussione su e.whichvs e.keyCode: Nota che e.whichè il valore normalizzato jquery ed è quello raccomandato per l'uso:

La proprietà event.which normalizza event.keyCode ed event.charCode. Si consiglia di guardare event.che per l'inserimento dei tasti della 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. :)

La tua scommessa migliore è

$(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 che keyCodeperché è normalizzato
• keyup è più preferibile di keydown perché il keydown può verificarsi più volte se l'utente lo tiene premuto.
• Non utilizzare a keypressmeno che non si desideri catturare personaggi 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 sbagliata lì.

Frammento correlato dal documento JQuery

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

Altro elemento di interesse: JavaScript Keypress Library

Prova il plug-in jEscape ( scarica da Google Drive )

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

o ottieni il codice chiave 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 switch

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

Il tuo codice funziona perfettamente. È molto probabile che la finestra non sia focalizzata. Uso una funzione simile per chiudere caselle 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 prendendo in giro. In Firefox, sembra che se provi a fare alcune cose quando viene premuto il tasto Esc, continua a elaborare il tasto Esc che annulla tutto ciò che stavi cercando di fare. L'avviso funziona bene. Ma nel mio caso, volevo tornare indietro nella storia che non ha funzionato. Alla fine ho capito che dovevo forzare l'interruzione della propagazione dell'evento come mostrato di seguito ...

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 è il tuo uso di keypress.

Forse l'evento ha solo un nome sbagliato ma keypressè definito per sparare quando . Cioè testo. Mentre quello che vuoi è / , che si attiva ogni volta (prima o dopo, rispettivamente)when an actualcharacteris being inserted
keydownkeyupthe user depresses akey . 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 sparando keypress.
enterè strano, perché anche se lo stai usando come carattere di controllo (cioè per controllare l'interfaccia utente), sta ancora inserendo un carattere di nuova riga, che verrà attivato keypress.

Fonte: quirksmode

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

È sufficiente pubblicare una risposta aggiornata di quella che e.keyCodeè considerata DEPRECATA su MDN .

Piuttosto dovresti optare per e.keyinvece che supporta nomi puliti per tutto. Ecco la copia rilevante della pasta

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

Una robusta libreria Javascript per acquisire input da tastiera e combinazioni di tasti immessi. 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;
    }
});

tasti di scelta rapida comprende i seguenti modificatori: ⇧, shiftoption⌥altctrlcontrolcommand, e⌘ .

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

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

So che questa domanda si pone su jquery, ma per quelle persone che usano jqueryui, ci sono costanti per molti dei codici chiave:

$.ui.keyCode.ESCAPE

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