ventana - detectar tecla esc javascript

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

Question

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

Answer 1

(Respuesta extraída de mi comentario anterior )

Necesitas usar keyup lugar de keyup keypress . p.ej:

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

keypress no parece manejarse de manera consistente entre los navegadores (pruebe la demostración en http://api.jquery.com/keypress en IE vs Chrome vs Firefox. A veces, keypress no se registra, y los valores para ambos ''cual'' y ''keyCode'' varían) mientras que keyup es consistente.

Dado que hubo una discusión sobre e.which vs e.keyCode : e.keyCode cuenta que e.which es el valor normalizado de jquery 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/ )

Answer 2

En lugar de codificar los valores de 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, que no están seguros de otros) definen un objeto KeyEvent global que expone estos tipos de constantes por usted. Esta pregunta de SO muestra una buena manera de definir ese objeto en otros navegadores también.

Answer 3

Estaba tratando de hacer lo mismo y me estaba fastidiando. En Firefox, parece que si intentas hacer algunas cosas cuando se presiona la tecla Escape, continúa procesando la tecla Escape, que cancela lo que intentas hacer. La alerta funciona bien. Pero en mi caso, quería volver a la historia que no funcionó. Finalmente descubrí que tuve que forzar la propagación del evento para que se detuviera 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);
}

Answer 4

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

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

Answer 5

Para explicar donde otras respuestas no tienen; El problema es su uso de la keypress de keypress .

Tal vez el evento tenga un nombre keypress pero la keypress está definida para activarse cuando is being inserted when an actual character when an actual . Es decir, el texto.
Mientras que lo que desea es keydown / keyup , que se keyup cada vez que (antes o después, respectivamente) the user depresses a key . Es decir, esas cosas en el teclado.

La diferencia aparece aquí porque esc es 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 keypress .
enter es raro, 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 activará la keypress .

Fuente: quirksmode

Answer 6

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

Answer 7

Prueba con el evento keyup :

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

Answer 8

Prueba el plugin jEscape ( descarga desde google drive )

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

u obtener el código clave para 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;
}

Answer 9

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/

Answer 10

Siempre he usado keyup y e.which para atrapar la clave de escape.

Answer 11

Solo publicar una respuesta actualizada que e.keyCode se considera DEPRECATED en MDN .

En su lugar, debería optar por e.key que admite nombres limpios para todo. Aquí está la copia relevante de la 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);

Answer 12

Su código funciona bien. Es muy probable que la ventana no esté enfocada. Utilizo una función similar para cerrar cuadros de marco de imágenes, 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'';
    }

});

Answer 13

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

• which es más preferible que keyCode porque está normalizado
• keyup es más preferible que keydown porque keydown puede ocurrir varias veces si el usuario lo mantiene presionado.
• No utilice la keypress menos que desee capturar caracteres reales.

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

Fragmento relacionado de JQuery doc.

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 del teclado, incluidos los códigos para teclas especiales, como las flechas. Para capturar la entrada de texto real, .keypress () puede ser una mejor opción.

Otro objeto de interés: JavaScript Keypress Library

Answer 14

Una robusta biblioteca de Javascript para capturar entradas de teclado y 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;
    }
});

las teclas de acceso rápido comprenden los siguientes modificadores: ⇧ , la opción de cambio ⌥ alt ctrl control command , y ⌘ .

Las siguientes teclas especiales se pueden usar para los accesos directos: pestaña de retroceso , borrar , ingresar , regresar , esc , escapar , espacio , arriba , abajo , izquierda , derecha , inicio , finalizar , retroceder página , eliminar , eliminar y f1 a f19 .

Answer 15

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