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

J'ai deux fonctions. Lorsque enter est enfoncé, les fonctions s'exécutent correctement, mais lorsque escape est enfoncé, il ne fonctionne pas. Quel est le bon numéro pour la touche d'échappement?

$(document).keypress(function(e) { 
    if (e.which == 13) $('.save').click();   // enter (works as expected)
    if (e.which == 27) $('.cancel').click(); // esc   (does not work)
});

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 en dur les valeurs de code dans votre fonction, pensez à utiliser des constantes nommées pour mieux transmettre votre sens:

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, peu sûrs des autres) définissent un KeyEventobjet global qui expose ces types de constantes pour vous. Cette question SO montre également une belle façon de définir cet objet dans d'autres navigateurs.

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

Vous devez utiliser keyupplutôt que keypress. par exemple:

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

keypressne semble pas être géré de manière cohérente entre les navigateurs (essayez la démo sur http://api.jquery.com/keypress dans IE vs Chrome vs Firefox. Parfois, keypressne s'enregistre pas, et les valeurs pour "which" et " keyCode 'varient) alors qu'il keyupest cohérent.

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

La propriété event.which normalise event.keyCode et event.charCode. Il est recommandé de regarder event.which pour la saisie des touches du clavier.

(depuis http://api.jquery.com/event.which/ )

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

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

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

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

Sommaire

• whichest plus préférable que keyCodeparce qu'elle est normalisée
• keyupest plus préférable que keydownparce que la frappe peut se produire plusieurs fois si l'utilisateur la maintient enfoncée.
• Ne l'utilisez keypressque si vous souhaitez capturer des personnages 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 associé du document JQuery

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

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

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

vous pouvez peut-être utiliser le commutateur

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

Votre code fonctionne très bien. C'est probablement la fenêtre qui n'est pas focalisé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 dérangeait. Dans Firefox, il semble que si vous essayez de faire certaines choses lorsque la touche d'échappement est enfoncée, il continue de traiter la touche d'échappement qui annule ensuite tout ce que vous essayez de faire. L'alerte fonctionne bien. Mais dans mon cas, je voulais revenir dans l'histoire qui n'a pas fonctionné. Enfin compris que je devais forcer 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 où les autres réponses n'ont pas; le problème est votre utilisation de keypress.

Peut-être que l'événement est simplement mal nommé mais keypressest défini pour se déclencher quand . C'est-à-dire du texte. Alors que ce que vous voulez est / , qui se déclenche à chaque fois (respectivement avant ou après) . C'est à dire ces choses sur le clavier.when an actualcharacteris being inserted
keydownkeyupthe user depresses akey

La différence apparaît ici car il escs'agit d'un caractère de contrôle (littéralement «caractère non imprimable») et n'écrit donc aucun texte, donc même pas de tir keypress.
enterest bizarre, car même si vous l'utilisez comme caractère de contrôle (c'est-à-dire pour contrôler l'interface utilisateur), il insère toujours un caractère de nouvelle ligne, qui se déclenchera keypress.

Source: quirksmode

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

Il suffit de poster une réponse mise à jour qui e.keyCodeest considérée comme obsolète sur MDN .

Vous devriez plutôt opter pour e.keyplutôt qui prend en charge les noms propres pour tout. Voici les pâtes de copie pertinentes

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }

  switch (event.key) {
    case "ArrowDown":
      // Do something for "down arrow" key press.
      break;
    case "ArrowUp":
      // Do something for "up arrow" key press.
      break;
    case "ArrowLeft":
      // Do something for "left arrow" key press.
      break;
    case "ArrowRight":
      // Do something for "right arrow" key press.
      break;
    case "Enter":
      // Do something for "enter" or "return" key press.
      break;
    case "Escape":
      // Do something for "esc" key press.
      break;
    default:
      return; // Quit when this doesn't handle the key event.
  }

  // Cancel the default action to avoid it being handled twice
  event.preventDefault();
}, true);

Une bibliothèque Javascript robuste pour capturer les saisies au clavier et les combinaisons de touches saisies. Il n'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;
    }
});

raccourcis clavier comprend les modificateurs suivants: ⇧, shiftoption⌥altctrlcontrolcommand, et ⌘.

Les touches spéciales suivantes peuvent être utilisées pour les raccourcis: backspacetab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deleteet à f1travers f19.

J'ai toujours utilisé keyup et e.which pour attraper la touche d'échappement.

Je sais que cette question se pose sur jquery, mais pour les personnes utilisant jqueryui, il existe des constantes pour de nombreux codes clés:

$.ui.keyCode.ESCAPE

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