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


J'ai deux fonctions. Lorsque vous appuyez sur Entrée, les fonctions fonctionnent correctement, mais lorsque vous appuyez sur Echap, ce n'est pas le cas. Quel est le bon numéro pour la clé 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)
});

511
2017-07-21 15:39


origine


Réponses:


Essayez avec le événement de keyup:

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

850
2017-07-21 15:52



Plutôt que de coder en dur les valeurs de keycode dans votre fonction, pensez à utiliser des constantes nommées pour mieux exprimer 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, pas sûr des autres) définissent un global KeyEvent objet qui expose ces types de constantes pour vous. Cette question SO montre une belle façon de définir cet objet dans d'autres navigateurs.


64
2018-02-02 20:09



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

Vous devez utiliser keyup plutôt que 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é de manière cohérente entre les navigateurs (essayez la démo à http://api.jquery.com/keypress dans IE vs Chrome vs Firefox. parfois keypress ne s'enregistre pas, et les valeurs de 'which' et 'keyCode' varient) keyup est consistent.

Comme il y avait une discussion de e.which contre e.keyCode: Notez que e.which est la valeur normalisée en jquery et est celle recommandée pour être utilisée:

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

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


31
2018-02-13 15:12



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

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

24
2017-08-13 07:35



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


13
2017-07-21 15:40



Essaie le jEscape brancher (télécharger depuis google drive)

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

ou obtenir 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 l'interrupteur

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

9
2018-06-15 13:38



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é

  • which est plus préférable que keyCode parce qu'il est normalisé
  • keyup est plus préférable que keydown car keydown peut se produire plusieurs fois si l'utilisateur appuie dessus.
  • Ne pas utiliser keypress sauf si vous voulez capturer des caractères réels.

Intéressant Bootstrap utilise keydown et keyCode dans son composant dropdown (à partir de 3.0.2)! Je pense que c'est probablement un mauvais choix.

Extraits connexes du document JQuery

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

Autre sujet d'intérêt: Bibliothèque de clés JavaScript


9
2017-12-04 08:59



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


7
2017-07-21 17:24



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

});

7
2018-05-28 13:06



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 vous appuyez sur la touche d'échappement, il continue à traiter la touche d'échappement qui annule tout ce que vous essayiez de faire. Alert fonctionne bien. Mais dans mon cas, je voulais revenir dans l'histoire qui n'a pas fonctionné. J'ai finalement compris que je devais arrêter la propagation de l'événement 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);
}

7
2018-02-04 01:07



Pour expliquer où d'autres réponses n'ont pas; le problème est votre utilisation de keypress.

Peut-être que l'événement est juste mal nommé, mais keypress est défini pour tirer quand when an actualcharacteris being inserted. C'est à dire. texte.
Alors que ce que tu veux est keydown/keyup, qui se déclenche à chaque fois (avant ou après, respectivement) the user depresses akey. C'est à dire. ces choses sur le clavier.

La différence apparaît ici parce que esc est un caractère de contrôle (littéralement «caractère non imprimable») et n'écrit donc pas de texte, ne tirant même pas keypress.
enter est 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 déclenche keypress.

La source: Mode de quirks


6
2017-09-18 05:24