web-dev-qa-db-fra.com

Vérifier les touches Ctrl / Maj / Alt sur l'événement 'clic'

Comment pourrais-je identifier qui Ctrl / Shift / Alt les touches sont enfoncées dans le code suivant?

$("#my_id").click(function() {
    if (<left control key is pressed>) { alert("Left Ctrl"); }
    if (<right shift and left alt keys are pressed>) { alert("Right Shift + Left Alt"); }
});
javascriptjqueryhtmlfirefox3.6
72
Misha Moroshko

Eh bien, cela ne fonctionnera pas dans tous les navigateurs, mais seulement IE. Voici un lien http://msdn.Microsoft.com/en-us/library/ms534630(VS.85).aspx

J'ai aussi trouvé cet article miracle sur la pression sur une touche, la touche clavier, l'événement clé dans les navigateurs . http://unixpapa.com/js/key.html

$('#someelement').bind('click', function(event){ 

    if(event.ctrlKey) {
      if (event.ctrlLeft) {
        console.log('ctrl-left'); 
      }
      else {
        console.log('ctrl-right');
      }
    }
    if(event.altKey) {
      if (event.altLeft) {
        console.log('alt-left'); 
      }
      else {
        console.log('alt-right');
      }
    }
    if(event.shiftKey) {
      if (event.shiftLeft) {
        console.log('shift-left'); 
      }
      else
      {
        console.log('shift-right');
      }
    }
  });
63
John Hartsock
$('#someelement').bind('click', function(event){
   if(event.ctrlKey)
      console.log('ctrl');
   if(event.altKey)
      console.log('alt');
   if(event.shiftKey)
      console.log('shift');

});

Je ne sais pas s'il est possible de vérifier les touches gauche/droite dans un événement de clic, mais je ne pense pas que ce soit possible.

38
jAndy

e.originalEvent.location renvoie 1 pour la touche gauche et 2 pour la touche droite. Par conséquent, vous pouvez détecter quelle touche modifier est enfoncée comme suit. J'espère que ceci vous aidera.

var msg = $('#msg');
$(document).keyup(function (e) {
      if (e.keyCode == 16) {
          if (e.originalEvent.location == 1)
              msg.html('Left SHIFT pressed.');
          else
              msg.html('Right SHIFT pressed.');
      } else if (e.keyCode == 17) {
          if (e.originalEvent.location == 1)
              msg.html('Left CTRL pressed.');
          else
              msg.html('Right CTRL pressed.');
      } else if (e.keyCode == 18) {
          if (e.originalEvent.location == 1)
              msg.html('Left ALT pressed.');
          else
              msg.html('Right ALT pressed.');
        
          e.preventDefault(); //because ALT focusout the element
      }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Press modifier key: </label>
<strong id="msg"></strong>

6
Ibrahim Khan

Dans la plupart des cas, le ALT, CTRL,et SHIFT key booleans fonctionnera pour voir si ces touches ont été pressées. Par exemple:

var altKeyPressed = instanceOfMouseEvent.altKey

Lorsqu'il est appelé, il retournera vrai ou faux. Pour plus d'informations, allez sur https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey

Pour référence future, il en existe également un appelé metaKey(NS/firefox uniquement) qui fonctionne lorsque la touche Méta est enfoncée.

5
DJHakim

Utilisez js-hotkeys . C'est un plugin jQuery.

Ceci est un test pour montrer ce que vous recherchez. Il vous montre également comment capturer les touches standard gauche, droite, haut, bas et celles du clavier numérique (celui portant les chiffres 2,4,6,8)! http://afro.systems. googlepages.com/test-static-08.html

1
user347594

Après mon commentaire , c'est une solution possible.

Pour vérifier quelle touche de modification spécifique est enfoncée, vous pouvez utiliser KeyboardEvent Location ( voir support du tablea )

Pour supporter IE8, heureusement, vous pouvez utiliser solution déjà publiée .

La solution de contournement consiste maintenant à définir un objet global avec les propriétés pertinentes concernant les touches de modification maintenues. D'autres moyens sans utiliser l'objet global seraient bien sûr possibles.

Ici, je capture un événement en utilisant une méthode d’écoute javascript appropriée (jQuery ne prend pas en charge la phase de capture) . Nous capturons un événement pour gérer le cas où la propagation des événements keydown/keyup serait arrêtée pour une raison quelconque par le code déjà utilisé.

/* global variable used to check modifier keys held */
/* Note: if e.g control left key and control right key are held simultaneously */
/* only first pressed key is handled (default browser behaviour?)*/
window.modifierKeys = (function() {
  /* to handle modifier keys except AltGr which is key shortcut for controlRight + alt */
  var mKeys = {};
  /* to fire keydown event only once per key held*/
  var lastEvent, heldKeys = {};
  // capture event to avoid any event stopped propagation
  document.addEventListener('keydown', function(e) {
    if (lastEvent && lastEvent.which == e.which) {
      return;
    }
    lastEvent = e;
    heldKeys[e.which] = true;
    setModifierKey(e);
  }, true);
  // capture event to avoid any event stopped propagation
  document.addEventListener('keyup', function(e) {
    lastEvent = null;
    delete heldKeys[e.which];
    setModifierKey(e);
  }, true);

  function setModifierKey(e) {
    mKeys.alt = e.altKey;
    mKeys.ctrlLeft = e.ctrlKey && e.location === 1;
    mKeys.ctrlRight = e.ctrlKey && e.location === 2;
    mKeys.shiftLeft = e.shiftKey && e.location === 1;
    mKeys.shiftRight = e.shiftKey && e.location === 2;
  }
  return mKeys;
})();

/* on div click, check for global object */
$('.modifierKey').on('click', function() {
  console.log(modifierKeys);
  /* for demo purpose */
  $('.info').text(function() {
    var txt = [];
    for (var p in modifierKeys) {
      if (modifierKeys[p]) txt.Push(p);
    }
    return txt.toString();
  });
})
/* for demo purpose */

.info:not(:empty) {
  border: 1px solid red;
  padding: .1em .5em;
  font-weight: bold;
}
.info:not(:empty):after {
  content: " held";
  font-weight: normal;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="modifierKey" tabindex="-1">
  DIV to catch modifier keys on click
</div>
<br>
<span class="info"></span>

Comme notes latérales:

  • ALT GR la touche est une touche de raccourci pour CTRL-Right Et ALT clés
  • si vous maintenez simultanément deux touches de modification identiques (par exemple, les touches Shift-Left et Shift-Rigth), seul le premier à être manipulé (semble être le comportement par défaut du navigateur, donc de toute façon, semble correct!)
1
A. Wolff

Fonctionne comme un charme! et sur Chrome, Firefox, IE et Edge aussi;) https://jsfiddle.net/55g5utsk/2/

var a=[];
function keyName(p){
    var cases = {16:'Shift',17:'CTRL',18:'Alt'};
    return cases[p] ? cases[p] : 'KeyCode: '+p;
}
function keyPosition(p){
    var cases = {1:'Left',2:'Right'};
    return cases[p] ? cases[p]+' ' : '';
}
$('input').on('keydown',function(e){
    a.Push(keyPosition(e.originalEvent.location)+keyName(e.keyCode));
})
$('input').on('keyup',function(){
    var c='';
    var removeDuplicates = [];
    $.each(a, function(i, el){
        if ($.inArray(el, removeDuplicates) === -1) {
           removeDuplicates.Push(el);
           c=c+(el)+' + ';
        }
    });
    a=[];
    alert(c.slice(0, -3))
});

Suite à une version avec l'événement clickhttp://jsfiddle.net/2pL0tzx9/

var a=[];
function keyName(p){
    var cases = {16:'Shift',17:'CTRL',18:'Alt'};
    return cases[p] ? cases[p] : '';
}
function keyPosition(p){
    var cases = {1:'Left',2:'Right'};
    return cases[p] ? cases[p]+' ' : '';
}
$(document).on('keydown',function(e){
    a.Push(keyPosition(e.originalEvent.location)+keyName(e.keyCode));
})
$('#my_id').on('click',function(){
    var c='';
    var removeDuplicates = [];
    a =a.filter(function(v){return v!==''});
    $.each(a, function(i, el){
      if ($.inArray(el, removeDuplicates) === -1){
          removeDuplicates.Push(el);
          c=c+(el)+' + ';
      }
    });
    if (c) alert(c.slice(0, -3));
    a=[];   
});
0
Vixed

Plus facile que tout: vous utilisez l’événement keydown pour vérifier si Ctrl (17) ou Shift (16), vous utilisez ensuite l'événement keyup pour vérifier si c'est Enter (13) et Ctrl ou Shift appuyer avant (touche enfoncée) annuler Ctrl ou Shift sur n'importe quelle touche mais Enter

0
Otvazhnii

Il y a quelques raisons pour lesquelles droite et gauche CTRL,SHIFT Et ALT les clés ne sont pas distinctes car 1. les codes clés sont identiques 2. De nombreux claviers d'ordinateurs portables ne peuvent pas comporter deux clés de contrôle. Prise d'une référence: Comment savoir si un événement provient de la touche Ctrl droite?

0
Parth Patel