¿Cómo detectar la pulsación de la tecla de escape con JS o jQuery puro?

524

Posible duplicado:
qué código clave para la tecla de escape con jQuery

¿Cómo detectar la pulsación de la tecla de escape en IE, Firefox y Chrome? El siguiente código funciona en IE y alertas 27, pero en Firefox alerta0

$('body').keypress(function(e){
    alert(e.which);
    if(e.which == 27){
        // Close my modal window
    }
});
Mithun Sreedharan
fuente
1
hacer algo de detección del navegador primero?
ina
77
Encuentro que quirksmode.org siempre es confiable para averiguar qué funciona en qué navegador: quirksmode.org/js/keys.html . Allí puede encontrar eso solo keyupo keydownen combinación con keyCodetrabajos en todos los navegadores.
Felix Kling
1
Creo que el título de esta pregunta debería ser "¿Cómo detectar la pulsación de una tecla de escape con jquery?" O las respuestas deben estar en JavaScript nativo ...
Wilt
3
$(document).on("keyup", function (e) {var code = e.keyCode || e.which; alert('key pressed: ' + code);});Saludos desde el 2014
Kalle H. Väravas
Posible duplicado de Which keycode para escape key con jQuery
Cœur

Respuestas:

957

Nota: keyCodeestá recibiendo un uso obsoleto en su keylugar.

function keyPress (e) {
    if(e.key === "Escape") {
        // write your logic here.
    }
}

Aquí está jsfiddle


keyCode se está despreciando

Parece keydowny keyupfunciona, aunque keypresspuede que no


$(document).keyup(function(e) {
     if (e.key === "Escape") { // escape key maps to keycode `27`
        // <DO YOUR WORK HERE>
    }
});

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

Jigar Joshi
fuente
11
para desvincular: $ (documento) .unbind ("keyup", keyUpFunc);
Plattsy,
54
Para desenlazar, también puede usar un espacio de nombres en el evento, $(document).on('keyup.unique_name', ...)y$(document).unbind('keyup.unique_name')
Lachlan McD.
99
Se recomienda utilizar e.which (en lugar de e.keycode) para verificar qué tecla se presionó. jQuery normaliza el código clave y el código de char (utilizado en navegadores antiguos)
DMTintner
1
@DMTintner: sobre el mismo tema, vea el comentario dejado por Jordan Brough stackoverflow.com/a/1160109/759452
Adrien Be
8
Siempre debes usar ===.
pmandell
211

El keydownevento funcionará bien para Escape y tiene la ventaja de permitirle usarlo keyCodeen todos los navegadores. Además, debe adjuntar al oyente en documentlugar del cuerpo.

Actualización de mayo de 2016

keyCodeahora está en proceso de desaprobación y la mayoría de los navegadores modernos ofrecen la keypropiedad ahora, aunque todavía necesitará un respaldo para un soporte decente del navegador por el momento (al momento de escribir las versiones actuales de Chrome y Safari no lo admiten).

La actualización de septiembre de 2018 evt.key ahora es compatible con todos los navegadores modernos.

document.onkeydown = function(evt) {
    evt = evt || window.event;
    var isEscape = false;
    if ("key" in evt) {
        isEscape = (evt.key === "Escape" || evt.key === "Esc");
    } else {
        isEscape = (evt.keyCode === 27);
    }
    if (isEscape) {
        alert("Escape");
    }
};
Click me then press the Escape key

Tim Down
fuente
3
Tenga en cuenta que también puede agregar el oyente a un <input>elemento y, por lo tanto, solo se activará cuando este elemento tenga el foco.
Mike
1
@Ranmocy: ¿Qué tipo de elemento es (el que tiene ID 'prueba')? Solo los elementos que son capaces de recibir foco (entradas de formulario, elementos contentables, elementos con un índice tabindex) activan eventos clave.
Tim Down
1
También puede verificar en if (evt.key === 'Escape') {lugar de usar el obsoletokeyCode
Keysox
1
@tobymackenzie: Así es. ¿No es maravilloso? Bienvenido al valiente nuevo mundo del desarrollo web basado en estándares.
Tim Down
1
Si quieres saber si puedes usarlo de forma segura .key, visita caniuse.com/#feat=keyboardevent-key
Jasper de Vries el
37

Usando JavaScript puedes verificar el funcionamiento de jsfiddle

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
        alert('Esc key pressed.');
    }
};

Usando jQuery puedes verificar el funcionamiento de jsfiddle

jQuery(document).on('keyup',function(evt) {
    if (evt.keyCode == 27) {
       alert('Esc key pressed.');
    }
});
Subodh Ghulaxe
fuente
17

verifique keyCode&& which& keyup||keydown

$(document).keydown(function(e){
   var code = e.keyCode || e.which;
   alert(code);
});
jAndy
fuente
veo que esto no funciona, jsfiddle.net/GWJVt solo por el escape ... ¿parece incómodo?
Reigel
$ (document.body) .keypress () no está disparando
Mithun Sreedharan
@Reigel: de hecho, parece que no funciona correctamente con la pulsación de teclas. Sin embargo, no puedo entender la parte 'incómoda'.
jAndy
3
KeyPress se genera para las teclas de caracteres (a diferencia de KeyDown y KeyUp, que también se generan para las teclas que no son caracteres) mientras se presiona la tecla.
Marta
7

La mejor manera es hacer que esto funcione

FUNCIÓN:

$.fn.escape = function (callback) {
    return this.each(function () {
        $(document).on("keydown", this, function (e) {
            var keycode = ((typeof e.keyCode !='undefined' && e.keyCode) ? e.keyCode : e.which);
            if (keycode === 27) {
                callback.call(this, e);
            };
        });
    });
};

EJEMPLO:

$("#my-div").escape(function () {
    alert('Escape!');
})
Ivijan Stefan Stipić
fuente
44
En realidad, parece que keypressno se dispara en la tecla de escape. Al menos, no en Chrome en una Mac.
samson
1
Gracias por este comentario, hice una regla de actualización y cambio. keydownarreglar el problema.
Ivijan Stefan Stipić
Actualicé su solución para poder admitir un uso de 'solo una vez'. Aquí hay un ejemplo: jsfiddle.net/oxok5x2p .
dh
6

A continuación se muestra el código que no solo deshabilita la tecla ESC, sino que también verifica la condición donde se presiona y, dependiendo de la situación, realizará la acción o no.

En este ejemplo,

e.preventDefault();

desactivará la acción de presionar la tecla ESC.

Puede hacer algo como ocultar un div con esto:

document.getElementById('myDivId').style.display = 'none';

Cuando se presiona la tecla ESC también se tiene en cuenta:

(e.target.nodeName=='BODY')

Puede eliminar esto si parte de la condición si desea aplicar esto a todos. O puede seleccionar INPUT aquí para aplicar solo esta acción cuando el cursor está en el cuadro de entrada.

window.addEventListener('keydown', function(e){
    if((e.key=='Escape'||e.key=='Esc'||e.keyCode==27) && (e.target.nodeName=='BODY')){
        e.preventDefault();
        return false;
    }
}, true);
Tarik
fuente
0

Creo que la forma más sencilla es JavaScript vainilla:

document.onkeyup = function(event) {
   if (event.key === 27){
     //do something here
   }
}
Duan Walker
fuente
66
En mi Chrome (Versión 55.0.2883.95 (64 bits)) obtengo Escapecomo event.keyy no 27
MosheZada
Debería ser event.keyCode27.
Jens Törnell