Comment détecter une pression sur la touche d'échappement avec JS ou jQuery pur?

Duplicate possible:
quel code clé pour la touche d'échappement avec jQuery

Comment détecter la pression des touches d'échappement dans IE, Firefox et Chrome? Le code ci-dessous fonctionne dans IE et les alertes 27, mais dans Firefox, il alerte0

$('body').keypress(function(e){
    alert(e.which);
    if(e.which == 27){
        // Close my modal window
    }
});

Note: keyCodeest devient désapprouvée utilisation à la keyplace.

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

Voici jsfiddle

keyCode devient obsolète

Il semble keydownet le keyuptravail, même si keypresspeut pas

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

Quel code clé pour la touche d'échappement avec jQuery

le keydown événement fonctionnera bien pour Escape et a l'avantage de vous permettre d'utiliser keyCodedans tous les navigateurs. En outre, vous devez attacher l'auditeur documentplutôt que le corps.

Mise à jour de mai 2016

keyCodeest maintenant en cours de dépréciation et la plupart des navigateurs modernes proposent la keypropriété maintenant, bien que vous ayez toujours besoin d'une solution de rechange pour un support décent du navigateur pour le moment (au moment de la rédaction, les versions actuelles de Chrome et Safari ne le prennent pas en charge).

La mise à jour de septembre 2018 evt.key est désormais prise en charge par tous les navigateurs modernes.

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

En utilisant JavaScript, vous pouvez vérifier le fonctionnement de jsfiddle

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

En utilisant jQuery, vous pouvez vérifier le fonctionnement de jsfiddle

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

vérifier keyCode&& which& keyup||keydown

$(document).keydown(function(e){
   var code = e.keyCode || e.which;
   alert(code);
});

Le meilleur moyen est de faire fonctionner cela

UNE FONCTION:

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

EXEMPLE:

$("#my-div").escape(function () {
    alert('Escape!');
})

Ci-dessous se trouve le code qui non seulement désactive la touche ESC mais vérifie également la condition dans laquelle elle est enfoncée et selon la situation, il fera ou non l'action.

Dans cet exemple,

e.preventDefault();

désactivera l'action de la touche ESC.

Vous pouvez faire quelque chose comme pour cacher une div avec ceci:

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

Lorsque la touche ESC est également prise en compte:

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

Vous pouvez supprimer cette partie condition si vous souhaitez l'appliquer à tous. Ou vous pouvez cibler INPUT ici pour appliquer cette action uniquement lorsque le curseur est dans la zone de saisie.

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

je pense que le moyen le plus simple est la vanille javascript:

document.onkeyup = function(event) {
   if (event.key === 27){
     //do something here
   }
}