Comment détecter la touche d'échappement avec JavaScript ou jQuery?

Il semble que keydown travaux de keyup et de keyup , bien que la keypress ne soit pas possible

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

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

L'événement de keydown fonctionnera bien pour Escape et vous permet d'utiliser keyCode dans tous les navigateurs. De plus, vous devez attacher l'auditeur au document plutôt qu'au corps.

MISE à JOUR Mai 2016

keyCode est maintenant en train d'être obsolète et la plupart des navigateurs modernes offrent la propriété key maintenant, bien que vous aurez toujours besoin d'un retour pour un support de navigateur correct pour l'instant (au moment de l'écriture des versions actuelles de Chrome et Safari ne le prennent pas en charge ).

 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 

En utilisant JavaScript, vous pouvez vérifier le travail 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 travail jsfiddle

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

Vérifiez pour keyCode && which & keyup || keydown

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

La meilleure façon est de rendre cette fonction

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

Je pense que le moyen le plus simple est le javascript de vanilla:

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

Voici le code qui désactive non seulement la touche ESC, mais vérifie également l'état où elle est pressée et selon la situation, elle fonctionnera ou non.

Dans cet exemple,

 e.preventDefault(); 

Désactivera l'action de la touche ESC-press.

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

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

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

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

Vous pouvez supprimer cette partie si condition si vous souhaitez postuler à cela à tous. Ou vous pouvez cibler INPUT ici pour n'appliquer cette action que lorsque le curseur est dans la boîte 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);