web-dev-qa-db-fra.com

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

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

Comment détecter une pression sur une touche d'échappement dans IE, Firefox et Chrome? Le code ci-dessous fonctionne dans IE et alerte 27, mais dans Firefox il alerte 0

$('body').keypress(function(e){
    alert(e.which);
    if(e.which == 27){
        // Close my modal window
    }
});
javascriptjqueryjavascript-eventskey
473
Mithun Sreedharan

Remarque: keyCodeest devenir obsolète utilisez keyà la place.

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

Voici jsfiddle

keyCodedevient obsolète

Il semble que keydownet keyupfonctionnent, même si keypresspeut ne pas fonctionner.

$(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

879
Jigar Joshi

L'événement keydownfonctionnera correctement pour Escape et présente l'avantage de vous permettre d'utiliser keyCodedans tous les navigateurs. De plus, vous devez associer l'auditeur à documentplutôt qu'au corps.

Mise à jour de mai 2016

keyCodeest en cours de dépréciation et la plupart des navigateurs modernes proposent la propriété keyNAME _ , bien que vous ayez encore besoin d'une solution de secours pour les navigateurs actuels (au moment de la rédaction des versions actuelles de Chrome). et Safari ne le supporte pas).

Mise à jour de septembre 2018 evt.key est maintenant pris 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
187
Tim Down

En utilisant JavaScript vous pouvez vérifier le fonctionnement jsfiddle

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

En utilisant jQuery vous pouvez faire fonctionner les chèques jsfiddle

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

recherchez keyCode&& which& keyup|| keydownname__

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

Le meilleur moyen est de faire fonctionner pour cela

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!');
})
7
Ivijan Stefan Stipić

Vous trouverez ci-dessous le code qui non seulement désactive la touche Échap, mais vérifie également la condition dans laquelle elle est activée et, selon la situation, il effectuera l'action ou non.

Dans cet exemple,

e.preventDefault();

désactive l’action d’appui sur la touche ESC.

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

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

Lorsque la touche ESC enfoncée est également prise en compte:

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

Vous pouvez supprimer cette partie de la condition si vous souhaitez l'appliquer à tous. Vous pouvez également 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);
7
Tarik

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

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