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

Essayez avec l' événement keyup :

 $(document).keyup(function(e) { if (e.keyCode === 13) $('.save').click(); // enter if (e.keyCode === 27) $('.cancel').click(); // esc }); 

Plutôt que de coder les valeurs du code-clé dans votre fonction, envisagez d'utiliser des constantes nommées pour mieux transmettre votre signification:

 var KEYCODE_ENTER = 13; var KEYCODE_ESC = 27; $(document).keyup(function(e) { if (e.keyCode == KEYCODE_ENTER) $('.save').click(); if (e.keyCode == KEYCODE_ESC) $('.cancel').click(); }); 

Certains navigateurs (comme FireFox, incertains d'autres) définissent un objet KeyEvent global qui expose ces types de constantes pour vous. Cette question SO montre une bonne façon de définir cet objet dans d'autres navigateurs.

(Réponse extraite de mon précédent commentaire )

Vous devez utiliser la keyup plutôt que la keypress . par exemple:

 $(document).keyup(function(e) { if (e.which == 13) $('.save').click(); // enter if (e.which == 27) $('.cancel').click(); // esc }); 

keypress ne semble pas être gérée de manière constante entre les navigateurs (essayez la démo à http://api.jquery.com/keypress dans IE vs Chrome vs Firefox. Parfois, la keypress ne s'inscrit pas et les valeurs pour les deux ' Et 'keyCode' varient) alors que la keyup est cohérente.

Puisqu'il y a eu une discussion sur e.which vs e.keyCode : Notez que e.which est la valeur normalisée jquery et est celle recommandée pour l'utilisation:

L'événement. Cette propriété normalise event.keyCode et event.charCode. Il est recommandé de regarder l'événement. Pour l'entrée de la clé du clavier.

(À partir de http://api.jquery.com/event.which/ )

Pour trouver le code clé de n'importe quelle touche, utilisez cette fonction simple:

 document.onkeydown = function(evt) { console.log(evt.keyCode); } 

27 est le code de la touche d'échappement. 🙂

Essayez le plugin jEscape ( téléchargement depuis Google Drive )

 $(document).escape(function() { alert('ESC button pressed'); }); 

Ou obtenez le code clé pour le navigateur croisé

 var code = (e.keyCode ? e.keyCode : e.which); if (code === 27) alert('ESC'); if (code === 13) alert('ENTER'); 

Peut-être que vous pouvez utiliser le commutateur

 var code = (e.keyCode ? e.keyCode : e.which); switch (code) { case 27: alert('ESC'); break; case 13: alert('ENTER'); break; } 

Votre meilleur pari est

 $(document).keyup(function(e) { if (e.which === 13) $('.save').click(); // enter if (e.which === 27) $('.cancel').click(); // esc /* OPTIONAL: Only if you want other elements to ignore event */ e.preventDefault(); e.stopPropagation(); }); 

Résumé

• keyCode est plus préférable à keyCode car il est normalisé
• keyup est plus préférable à la keydown car la décomposition peut se produire plusieurs fois si l'utilisateur l'empêche.
• N'utilisez pas la keypress moins que vous ne vouliez capturer les caractères réels.

Fait intéressant, Bootstrap utilise keydown et keyCode dans son composant déroulant (à partir de 3.0.2)! Je pense que c'est probablement un mauvais choix là-bas.

Extrait connexe de JQuery doc

Alors que les navigateurs utilisent des propriétés différentes pour stocker ces informations, jQuery normalise la propriété .which afin que vous puissiez l'utiliser avec fiabilité pour récupérer le code de clé. Ce code correspond à une touche du clavier, y compris des codes pour des touches spéciales telles que des flèches. Pour saisir l'entrée de texte réelle, .keypress () peut être un meilleur choix.

Autre élément d'intérêt: JavaScript Keypress Library

Pour obtenir le code hexadécimal pour tous les caractères: http://asciitable.com/

Votre code fonctionne très bien. Il est très probable que la fenêtre ne soit pas concentrée. J'utilise une fonction similaire pour fermer les boîtes iframe etc.

 $(document).ready(function(){ // Set focus setTimeout('window.focus()',1000); }); $(document).keypress(function(e) { // Enable esc if (e.keyCode == 27) { parent.document.getElementById('iframediv').style.display='none'; parent.document.getElementById('iframe').src='/views/view.empty.black.html'; } }); 

J'essayais de faire la même chose et ça me faisait mal. Dans Firefox, il semble que si vous essayez de faire certaines choses lorsque vous appuyez sur la touche d'échappement, il continue de traiter la clé de sortie qui annule tout ce que vous essayiez de faire. L'alerte fonctionne bien. Mais dans mon cas, je voulais revenir sur l'histoire qui ne fonctionnait pas. Finalement, j'ai compris que je devais obliger la propagation de l'événement à s'arrêter comme indiqué ci-dessous …

 if (keyCode == 27) { history.back(); if (window.event) { // IE works fine anyways so this isn't really needed e.cancelBubble = true; e.returnValue = false; } else if (e.stopPropagation) { // In firefox, this is what keeps the escape key from canceling the history.back() e.stopPropagation(); e.preventDefault(); } return (false); } 

Pour expliquer les autres réponses; Le problème est votre utilisation de la keypress de keypress .

Peut-être que l'événement est simplement mal nommé, mais la keypress est définie pour déclencher lorsque when an actual character when an actual is being inserted . C'est le texte.
Alors que ce que vous voulez, c'est la keyup / keyup , qui se déclenche chaque fois (avant ou après, respectivement), the user depresses a key . Ce sont ces choses sur le clavier.

La différence apparaît ici parce que esc est un personnage de contrôle (littéralement 'caractère non imprimant') et n'écrit donc aucun texte, donc ne déclenchera même pas la keypress .
enter est étrange, car même si vous l'utilisez comme un personnage de contrôle (c'est-à-dire pour contrôler l'interface utilisateur), il insère encore un caractère de nouvelle ligne qui keypress .

Source: quirksmode

J'ai toujours utilisé Keyup et e.which pour attraper la clé d'échappement.

Je sais que cette question pose des questions sur jquery, mais pour ceux qui utilisent jqueryui, il existe des constantes pour plusieurs codes clés:

 $.ui.keyCode.ESCAPE 

http://api.jqueryui.com/jQuery.ui.keyCode/

Une bibliothèque Javascript robuste pour capturer l'entrée du clavier et les combinaisons de touches saisies. Il n'y a pas de dépendances.

http://jaywcjlove.github.io/hotkeys/

 hotkeys('enter,esc', function(event,handler){ switch(handler.key){ case "enter":$('.save').click();break; case "esc":$('.cancel').click();break; } }); 

Les raccourcis clavier comprennent les modificateurs suivants: ⇧ , option de décalage ⌥ commande de commande alt ctrl et ⌘ .

Les touches spéciales suivantes peuvent être utilisées pour les raccourcis: onglet arrière , effacement , entrée , retour , esc , échappement , espace , haut , bas , gauche , droite , accueil , fin , page , pagedown , del , delete et f1 à f19 .