Quel code d'accès pour la clé escape avec jQuery

j'ai deux fonctions. Quand enter est pressé, les fonctions fonctionnent correctement, mais quand escape est pressé, ce n'est pas le cas. Quel est le bon numéro pour la clé de secours?

$(document).keypress(function(e) { 
    if (e.which == 13) $('.save').click();   // enter (works as expected)
    if (e.which == 27) $('.cancel').click(); // esc   (does not work)
});
514
demandé sur Seth 2009-07-21 19:39:25

15 réponses

Essayer avec le événement keyup :

$(document).keyup(function(e) {
  if (e.keyCode === 13) $('.save').click();     // enter
  if (e.keyCode === 27) $('.cancel').click();   // esc
});
856
répondu CMS 2016-04-05 14:08:46

plutôt que de codifier les valeurs du code dans votre fonction, envisagez d'utiliser les 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, incertain des autres) définissent un objet global KeyEvent qui expose ces types de constantes pour vous. Cela DONC, la question montre une belle façon de définir l'objet dans d'autres navigateurs aussi bien.

65
répondu Seth Petry-Johnson 2017-05-23 11:55:06

(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 traité de façon uniforme entre les navigateurs (essayer la démo à http://api.jquery.com/keypress in IE vs Chrome vs Firefox. Parfois keypress ne s'enregistre pas, et les valeurs pour "which" et "keyCode" varient) alors que keyup est cohérent.

Puisqu'il y a eu une certaine discussion de 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.quelle propriété normalise l'événement.mot de code et de l'événement.charCode. Il est recommandé de regarder de l'événement.qui pour l'entrée de la touche de clavier.

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

31
répondu Jordan Brough 2017-05-23 11:47:17

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

document.onkeydown = function(evt) {
    console.log(evt.keyCode);
}
24
répondu Hanzel 2013-09-10 21:42:43

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

13
répondu Salty 2014-07-09 11:59:40

essayer le jEscape plugin ( télécharger de google drive )

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

ou obtenir le code de 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 Pouvez-vous utiliser switch

var code = (e.keyCode ? e.keyCode : e.which);
switch (code) {
    case 27:
       alert('ESC');
       break;
     case 13:
       alert('ENTER');
       break;
}
9
répondu S. Ferit Arslan 2015-01-21 00:11:04

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 parce que keydown peut se produire plusieurs fois si l'utilisateur garde appuyé.
  • N'utilisez pas keypress sauf si vous voulez capturer des caractères réels.

il est intéressant de noter que Bootstrap utilise keydown et keyCode dans sa composante dropdown (en date du 3.0.2)! Je pense que c'est probablement mauvais choix.

extrait connexe de JQuery doc

alors que les navigateurs utilisent différents propriétés pour stocker cette information, jQuery normalise le .qui propriété de sorte que vous pouvez l'utiliser de façon fiable pour récupérer le code clé. Ce code correspond à une touche du clavier, y compris les codes spéciaux des clés comme des flèches. Pour attraper l'entrée de texte réelle,.keypress() peut être un meilleur choix.

autre sujet d'intérêt: bibliothèque JavaScript

9
répondu ShitalShah 2015-01-21 00:11:32

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

7
répondu Julien 2009-07-21 17:24:31

votre code fonctionne très bien. C'est probablement la fenêtre qui n'est pas concentré. 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
répondu Eric Herlitz 2010-05-28 13:06:42

j'essayais de faire la même chose et ça m'énervait. Dans firefox, il semble que si vous essayez de faire certaines choses quand la touche escape est pressée, il continue à traiter la touche escape qui annule alors ce que vous essayiez de faire. Alerte fonctionne très bien. Mais dans mon cas, je voulais revenir en arrière dans l'histoire qui n'a pas fonctionné. Finalement compris que j'ai dû forcer la propagation de l'événement pour 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);
}
7
répondu Billy Buerger 2011-02-04 01:07:08

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 keypress est défini à feu quand when an actual character is being inserted . I. e. texte.

Alors que ce que vous voulez est keydown / keyup , qui tire à chaque fois (avant ou après, respectivement) the user depresses a key . I. e. ces choses sur clavier.

la différence apparaît ici parce que esc est un caractère de contrôle (littéralement" caractère de non-impression") et donc n'écrit aucun texte, donc même pas de tir keypress .

enter est bizarre, parce que même si vous l'utilisez comme un caractère de contrôle (i.e. pour contrôler L'UI), il est encore en train d'insérer un caractère de nouvelle ligne, qui va lancer keypress .

Source: quirksmode

6
répondu Hashbrown 2013-09-18 05:24:02

j'ai toujours utilisé keyup et E. pour attraper la clé de secours.

4
répondu Dalius I 2012-02-03 08:57:22

je sais que cette question est posée à propos de jquery, mais pour ceux qui utilisent jqueryui, il y a des constantes pour beaucoup de keycodes:

$.ui.keyCode.ESCAPE

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

4
répondu Troy Grosfield 2014-09-17 15:37:38

une bibliothèque Javascript robuste pour capturer les entrées de 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: , shift option alt ctrl contrôle commande , et .

Les touches peuvent être utilisées pour les raccourcis: backspace onglet , clair , entrée , retour , esc , escape , espace , , vers le bas , de gauche , droit , maison , fin , pageup , pagedown , del , supprimer et f1 par f19 .

3
répondu 小弟调调 2015-10-08 02:33:36

vient d'afficher une réponse à jour que e.keyCode est considéré comme déprécié sur MDN .

vous devriez plutôt opter pour e.key à la place qui soutient des noms propres pour tout. Voici la copie pertinente pasta

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);
0
répondu aug 2017-09-05 23:10:49