Qué código clave para la tecla de escape con jQuery

Tengo dos funciones Cuando se presiona enter, las funciones se ejecutan correctamente, pero cuando se presiona escape, no lo hace. ¿Cuál es el número correcto para la tecla de 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)
});

Pruebe con el evento keyup :

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

En lugar de codificar los valores del código clave en su función, considere usar constantes con nombre para transmitir mejor su significado:

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

Algunos navegadores (como FireFox, inseguro de otros) definen un KeyEventobjeto global que expone este tipo de constantes para usted. Esta pregunta SO también muestra una buena manera de definir ese objeto en otros navegadores.

(Respuesta extraída de mi comentario anterior )

Necesita usar en keyuplugar de keypress. p.ej:

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

keypressno parece ser manejado de manera consistente entre los navegadores (pruebe la demostración en http://api.jquery.com/keypress en IE vs Chrome vs Firefox. A veces keypressno se registra, y los valores para 'cual' y ' keyCode 'varíe) mientras que keyupes consistente.

Dado que hubo una discusión sobre e.whichvs e.keyCode: Tenga en cuenta que e.whiches el valor jquery-normalizado y es el recomendado para su uso:

La propiedad event.which normaliza event.keyCode y event.charCode. Se recomienda ver el evento, que para la entrada de teclas del teclado.

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

Para encontrar el código clave de cualquier tecla, use esta función simple:

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

27es el código para la clave de escape. :)

Tu mejor apuesta es

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

Resumen

• whiches más preferible que keyCodeporque está normalizado
• keyupes más preferible que keydownporque se puede presionar la tecla varias veces si el usuario la mantiene presionada.
• No lo use a keypressmenos que quiera capturar personajes reales.

¡Curiosamente Bootstrap usa keydown y keyCode en su componente desplegable (a partir de 3.0.2)! Creo que probablemente sea una mala elección allí.

Fragmento relacionado del documento de JQuery

Mientras que los navegadores usan diferentes propiedades para almacenar esta información, jQuery normaliza la propiedad .which para que pueda usarla de manera confiable para recuperar el código clave. Este código corresponde a una tecla en el teclado, incluidos los códigos para teclas especiales como flechas. Para capturar la entrada de texto real, .keypress () puede ser una mejor opción.

Otro elemento de interés: JavaScript Keypress Library

Pruebe el complemento jEscape ( descargue de Google Drive )

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

u obtener el código clave para el navegador cruzado

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

tal vez puedas usar el interruptor

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

Tu código funciona bien. Es muy probable que la ventana no esté enfocada. Uso una función similar para cerrar cuadros de iframe, etc.

$(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';
    }

});

Estaba tratando de hacer lo mismo y me estaba molestando. En firefox, parece que si intenta hacer algunas cosas cuando se presiona la tecla de escape, continúa procesando la tecla de escape que luego cancela lo que estaba tratando de hacer. La alerta funciona bien. Pero en mi caso, quería volver a la historia que no funcionó. Finalmente descubrí que tenía que forzar la propagación del evento para detener como se muestra a continuación ...

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

Para explicar donde otras respuestas no lo han hecho; el problema es tu uso de keypress.

Tal vez el evento está mal nombrado pero keypressse define para disparar cuando . Es decir, texto. Mientras que lo que quieres es / , que se activa siempre (antes o después, respectivamente) . Es decir, esas cosas en el teclado.when an actualcharacteris being inserted
keydownkeyupthe user depresses akey

La diferencia aparece aquí porque esces un carácter de control (literalmente 'carácter no imprimible') y, por lo tanto, no escribe ningún texto, por lo que ni siquiera se dispara keypress.
enteres extraño, porque aunque lo esté utilizando como un carácter de control (es decir, para controlar la interfaz de usuario), todavía está insertando un carácter de nueva línea, que se activará keypress.

Fuente: quirksmode

Para obtener el código hexadecimal para todos los caracteres: http://asciitable.com/

Simplemente publicando una respuesta actualizada que e.keyCodese considera DEPRECADA en MDN .

En su lugar, debe optar por el e.keyque admite nombres limpios para todo. Aquí está la copia relevante de 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 biblioteca Javascript para capturar la entrada del teclado y las combinaciones de teclas ingresadas. No tiene dependencias.

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

hotkeys('enter,esc', function(event,handler){
    switch(handler.key){
        case "enter":$('.save').click();break;
        case "esc":$('.cancel').click();break;
    }
});

teclas de acceso rápido comprende los siguientes modificadores: ⇧, shiftoption⌥altctrlcontrolcommand, y ⌘.

Las siguientes teclas especiales se pueden utilizar para los accesos directos: backspacetab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deletey f1a través f19.

Siempre he usado keyup y e.which para capturar la tecla de escape.

Sé que esta pregunta es sobre jquery, pero para aquellas personas que usan jqueryui, hay constantes para muchos de los códigos clave:

$.ui.keyCode.ESCAPE

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