JQuery ou JavaScript: comment déterminer si la touche Maj est enfoncée tout en cliquant sur le lien hypertexte de la balise d'ancrage?

J'ai une balise d'ancrage qui appelle une fonction JavaScript.

Avec ou sans JQuery, comment déterminer si la touche Maj est enfoncée pendant que le lien est cliqué?

Le code suivant ne fonctionne PAS car la pression de touche n'est déclenchée que si une «touche réelle» (pas la touche Maj) est enfoncée. (J'espérais qu'il se déclencherait si on n'appuyait que sur la touche Maj.)

var shifted = false;

$(function() {                           
    $(document).keypress(function(e) {
        shifted = e.shiftKey;
        alert('shiftkey='+e.shiftkey);
    });

    $(document).keyup(function(e) {
        shifted = false;
    });
}

...

function myfunction() {
  //shift is always false b/c keypress not fired above
}

    $(document).on('keyup keydown', function(e){shifted = e.shiftKey} );

Voici le code de chaque touche en JavaScript. Vous pouvez l'utiliser et détecter si l'utilisateur a appuyé sur la touche Maj.

backspace           8
tab                 9
enter               13
shift               16
ctrl                17
alt                 18
pause/break         19
caps lock           20
escape              27
page up             33
page down           34
end                 35
home                36
left arrow          37
up arrow            38
right arrow         39
down arrow          40
insert              45
delete              46
0                   48
1                   49
2                   50
3                   51
4                   52
5                   53
6                   54
7                   55
8                   56
9                   57
a                   65
b                   66
c                   67
d                   68
e                   69
f                   70
g                   71
h                   72
i                   73
j                   74
k                   75
l                   76
m                   77
n                   78
o                   79
p                   80
q                   81
r                   82
s                   83
t                   84
u                   85
v                   86
w                   87
x                   88
y                   89
z                   90
left window key     91
right window key    92
select key          93
numpad 0            96
numpad 1            97
numpad 2            98
numpad 3            99
numpad 4            100
numpad 5            101
numpad 6            102
numpad 7            103
numpad 8            104
numpad 9            105
multiply            106
add                 107
subtract            109
decimal point       110
divide              111
f1                  112
f2                  113
f3                  114
f4                  115
f5                  116
f6                  117
f7                  118
f8                  119
f9                  120
f10                 121
f11                 122
f12                 123
num lock            144
scroll lock         145
semi-colon          186
equal sign          187
comma               188
dash                189
period              190
forward slash       191
grave accent        192
open bracket        219
back slash          220
close braket        221
single quote        222

Tous les navigateurs ne gèrent pas bien l'événement keypress, utilisez donc l'événement key up ou key down, comme ceci:

$(document).keydown(function (e) {
    if (e.keyCode == 16) {
        alert(e.which + " or Shift was pressed");
    }
});

Pour les événements de souris, je sais que dans Firefox au moins la propriété "shiftKey" sur l'objet événement vous dira si la touche Maj est enfoncée. Il est documenté chez MSDN mais je ne l'ai pas essayé depuis toujours, donc je ne me souviens pas si IE le fait correctement.

Ainsi, vous devriez être en mesure de vérifier "shiftKey" sur l'objet événement dans votre gestionnaire "click".

J'ai eu un problème similaire, en essayant de capturer un 'shift + click' mais comme j'utilisais un contrôle tiers avec un rappel plutôt que le clickgestionnaire standard , je n'avais pas accès à l'objet événement et à son associée.shiftKey .

J'ai fini par gérer l'événement mouse down pour enregistrer le décalage, puis l'utiliser plus tard dans mon rappel.

    var shiftHeld = false;
    $('#control').on('mousedown', function (e) { shiftHeld = e.shiftKey });

Publié juste au cas où quelqu'un d'autre finirait ici à la recherche d'une solution à ce problème.

L' keypressévénement n'est pas déclenché par tous les navigateurs lorsque vous cliquez sur shiftou ctrl, mais heureusement, l' keydownévénement est .

Si vous changez de keypressavec, keydownvous aurez peut-être plus de chance.

J'ai utilisé une méthode pour tester si une touche spécifique est enfoncée en stockant les codes de touche actuellement enfoncés dans un tableau:

var keysPressed = [],
    shiftCode = 16;

$(document).on("keyup keydown", function(e) {
    switch(e.type) {
        case "keydown" :
            keysPressed.push(e.keyCode);
            break;
        case "keyup" :
            var idx = keysPressed.indexOf(e.keyCode);
            if (idx >= 0)
                keysPressed.splice(idx, 1);
            break;
    }
});

$("a.shifty").on("click", function(e) {
    e.preventDefault();
    console.log("Shift Pressed: " + (isKeyPressed(shiftCode) ? "true" : "false"));
});

function isKeyPressed(code) {
    return keysPressed.indexOf(code) >= 0;
}

Voici le jsfiddle

L'excellente bibliothèque JavaScript KeyboardJS gère tous les types d'appuis sur les touches, y compris la touche SHIFT. Il permet même de spécifier des combinaisons de touches telles que d'appuyer d'abord sur CTRL + x puis sur a.

KeyboardJS.on('shift', function() { ...handleDown... }, function() { ...handleUp... });

Si vous voulez une version simple, dirigez-vous vers la réponse de @tonycoupland ):

var shiftHeld = false;
$('#control').on('mousedown', function (e) { shiftHeld = e.shiftKey });

Cela fonctionne très bien pour moi:

function listenForShiftKey(e){
    var evt = e || window.event;
    if (evt.shiftKey) {
      shiftKeyDown = true;
    } else {
      shiftKeyDown = false;
    }
}

Pour vérifier si la touche Maj est enfoncée tout en cliquant avec la souris , il existe une propriété exacte dans l'objet d'événement de clic : shiftKey (et aussi pour ctrl et alt et meta key): https://www.w3schools.com/jsref/event_shiftkey .aspic

Donc, en utilisant jQuery:

$('#anchor').on('click', function (e) {
    if (e.shiftKey) {
        // your code
    }
});

Une approche plus modulaire et la possibilité de garder votre thisportée dans les auditeurs:

var checkShift = function(fn, self) {
  return function(event) {
    if (event.shiftKey) {
      fn.call(self, event);
    }
    return true;
  };
};

$(document).on('keydown', checkShift(this.enterMode, this));

Si quelqu'un cherche à détecter une clé donnée et a besoin de connaître l'état des "modificateurs" (comme on les appelle en Java), c'est-à-dire les touches Shift, Alt et Control, vous pouvez faire quelque chose comme ça, qui répond à la keydowntouche F9, mais seulement si aucune des touches Shift, Alt ou Control n'est actuellement enfoncée.

jqMyDiv.on( 'keydown', function( e ){
    if( ! e.shiftKey && ! e.altKey && ! e.ctrlKey ){
        console.log( e );
        if( e.originalEvent.code === 'F9' ){
          // do something 
        }
    }
});

var shiftDown = false;
this.onkeydown = function(evt){
    var evt2 = evt || window.event;
    var keyCode = evt2.keyCode || evt2.which;       
    if(keyCode==16)shiftDown = true;
}
this.onkeyup = function(){
    shiftDown = false;
}

démo