Comment puis-je vérifier si une touche est enfoncée pendant l'événement de clic avec jQuery?

105

Je voudrais attraper un événement de clic avec jQuery et être capable de dire si une touche a été enfoncée en même temps afin que je puisse bifurquer dans la fonction de rappel en fonction de l'événement keypress.

Par exemple:

$("button").click(function() {
    if([KEYPRESSED WHILE CLICKED]) {
        // Do something...
    } else {
        // Do something different...
    }
});

Est-ce possible du tout ou comment le faire si c'est possible?

Daniel Smith
la source

Réponses:

174

Vous pouvez facilement détecter les touches shift, alt et control à partir des propriétés de l'événement;

$("button").click(function(evt) {
  if (evt.ctrlKey)
    alert('Ctrl down');
  if (evt.altKey)
    alert('Alt down');
  // ...
});

Voir quirksmode pour plus de propriétés. Si vous souhaitez détecter d'autres clés, consultez la réponse de cletus .

kkyy
la source
3
Je ne vois pas cette propriété sur l'objet jQuery Event: api.jquery.com/category/events/event-object
cletus
1
Eh bien, comme le dit la page, «la plupart des propriétés de l'événement d'origine sont copiées et normalisées dans le nouvel objet événement». ctrlKey, altKey etc. font partie de la norme ecmascript (voir le premier lien sur la page jquery api susmentionnée), donc (au moins dans les navigateurs décents) l'objet événement a généralement également ces propriétés définies.
kkyy
3
Le mode Quirks ne dit que ceux-ci sont définis dans un événement clé .. aucune mention sur un événement souris.
6
Vous pouvez même détecter la touche de commande de Mac OS X en utilisant if (e.metaKey) alert('Command down'). Voici un bel article sur les événements clés de JS unixpapa.com/js/key.html
F Lekschas
48

Vous devez suivre séparément l'état de la clé à l'aide de keydown()et keyup():

var ctrlPressed = false;
$(window).keydown(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = true;
  }
}).keyup(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = false;
  }
});

Voir la liste des codes clés . Maintenant, vous pouvez vérifier que:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});
cletus
la source
6
Un inconvénient de cette méthode (pas que je connaisse un meilleur moyen) est que si vous détectez la touche ALT et l'utilisateur ALT-Tabs vers une autre fenêtre, l'événement keyup n'est pas détecté par le navigateur car il s'est produit sur une autre application . À partir de ce moment, jquery pense que la clé est enfoncée, jusqu'à ce qu'elle clique dans votre application jquery. Cela n'a d'importance qu'avec la touche ALT, pour autant que je puisse l'imaginer.
Flat Cat
1
Pour Mac OS X, ce serait Cmd-Tab, mais je pense que le principal tient toujours
murftown le
1
Ou Ctrl + Tab pour changer l'onglet du navigateur
Seeven
9

J'ai pu l'utiliser uniquement avec JavaScript

 <a  href="" onclick="return Show(event)"></a>

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }
Arun Prasad ES
la source
1
Suite à cela, j'ai fait un petit ajustement et un stylo: codepen.io/vr_driver/pen/YRoRYO
vr_driver
3

Sans voler le tonnerre de @Arun Prasad , voici un extrait de code JS pur que j'ai reformulé pour arrêter l'action par défaut, qui ouvrirait autrement une nouvelle fenêtre si CTL + clic est pressé.

function Show(event) 
{
  if (event.ctrlKey) 
  {
    alert('Ctrl held down which clicked');
  } 
  else 
  {
    alert('Ctrl NOT pressed');
  }
  return false
}
<p>Hold down CTL on the link to get a different message</p>

<a href="" onclick="return Show(event)">click me</a>

vr_driver
la source