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


524

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

1
faire d'abord une détection de navigateur?
ina

7
Je trouve quirksmode.org toujours fiable pour savoir ce qui fonctionne dans quel navigateur: quirksmode.org/js/keys.html . Vous pouvez le trouver uniquement keyupou keydownen combinaison avec des keyCodeœuvres dans tous les navigateurs.
Felix Kling

1
Je pense que le titre de cette question devrait être "Comment détecter la touche d'échappement avec jquery?" Ou les réponses devraient être en javascript natif ...
Wilt

3
$(document).on("keyup", function (e) {var code = e.keyCode || e.which; alert('key pressed: ' + code);});Salutations du 2014
Kalle H. Väravas

Réponses:


957

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


11
pour dissocier: $ (document) .unbind ("keyup", keyUpFunc);
Plattsy

54
Pour dissocier, vous pouvez également utiliser un espace de noms sur l'événement, $(document).on('keyup.unique_name', ...)et$(document).unbind('keyup.unique_name')
Lachlan McD.

9
Il est recommandé d'utiliser e.which (au lieu de e.keycode) pour vérifier quelle touche a été enfoncée. jQuery normalise keycode et charcode (utilisé dans les anciens navigateurs)
DMTintner

1
@DMTintner: sur le même sujet, voir le commentaire laissé par Jordan Brough stackoverflow.com/a/1160109/759452
Adrien Be

8
Vous devez toujours utiliser ===.
pmandell

211

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


3
Remarque, vous pouvez également ajouter l'écouteur à un <input>élément et il ne sera donc déclenché que lorsque cet élément aura le focus.
Mike

1
@Ranmocy: De quel type d'élément s'agit-il (celui avec ID 'test')? Seuls les éléments capables de recevoir le focus (entrées de formulaire, éléments modifiables, éléments avec tabindex set) déclenchent des événements clés.
Tim Down

1
Vous pouvez également vérifier if (evt.key === 'Escape') {au lieu d'utiliser la version obsolètekeyCode
Keysox

1
@tobymackenzie: Il en est ainsi. N'est-ce pas merveilleux? Bienvenue dans le nouveau monde courageux du développement Web basé sur des normes.
Tim Down du

1
Si vous voulez savoir si vous pouvez l'utiliser en toute sécurité .key, voir caniuse.com/#feat=keyboardevent-key
Jasper de Vries

37

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

17

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

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

je vois que cela ne fonctionne pas, jsfiddle.net/GWJVt juste pour l'évasion ... semble maladroit?
Reigel

$ (document.body) .keypress () ne tire pas
Mithun Sreedharan

@Reigel: en effet, semble ne pas fonctionner correctement avec la touche. Quoi qu'il en soit, je ne peux pas comprendre la partie «maladroite».
jAndy

3
KeyPress est levé pour les touches de caractères (contrairement à KeyDown et KeyUp, qui sont également levés pour les touches non-caractères) lorsque la touche est enfoncée.
Marta

7

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

4
En fait, il semble que keypresscela ne se déclenche pas sur la touche d'échappement. Du moins, pas dans Chrome sur Mac.
samson

1
Merci pour ces commentaires, j'ai fait une règle de mise à jour et de changement. keydownrésoudre le problème.
Ivijan Stefan Stipić

J'ai mis à jour votre solution pour pouvoir prendre en charge une utilisation "une seule fois". Voici un exemple: jsfiddle.net/oxok5x2p .
dh

6

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

0

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

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

6
Sur mon chrome (Version 55.0.2883.95 (64 bits)) j'obtiens Escapeas event.keyet not 27
MosheZada

Il devrait être event.keyCodede 27 ans.
Jens Törnell
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.