JQuery or JavaScript: How determine if shift key being pressed while clicking anchor tag hyperlink?

Question

I have an anchor tag that calls a JavaScript function.

With or without JQuery how do I determine if the shift key is down while the link is clicked?

The following code does NOT work because keypress is only fired if a "real key" (not the shift key) is pressed. (I was hoping it would fire if just the shift key alone was pressed.)

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
}

Collation

the following code also does not work because you typed shiftkey instead of shiftKey :-) – Redpoll

If you need to know that to avoid calling the handler when pressing shift+click, use filter-altered-clicks – Semilunar

Answer 1

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

Orestes

This worked for me but interrupted all standard shortcuts that didn't involve shift since the function returns false. I needed to explicitly return true to allow crtl+r, ctrl+s, ctrl+p etc. – Amaranthine

So the suggestion is to use keydown instead of keypress. – Bituminous

Strange, I get only keydown events, no keyup. – Terrijo

@Bituminous keydown and keyup allow you to track the actual state of the shift key as they are fired for every key on the keyboard. Keypress is not always fired e.g. not fired when only the shift key is pressed. – Electoral

@Terrijo it could be there is some other event handler on your page which breaks the event chain. Check on a blank/new page first (one which doesn't include all your scripts) - it will work just right. – Electoral

$(document).keyup(function (e) { } and $(document).keydown(function (e) { } is what worked for me – Terrijo

This is best solution: https://mcmap.net/q/212581/-capture-a-shift-and-click-event-with-jquery – Coriolanus

Answer 2

Here is the key code for each key stroke in JavaScript. You can use that and detect if the user has pressed the Shift key.

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

Not all browsers handle the keypress event well, so use either the key up or the key down event, like this:

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

Autarchy

Use event.key instead! It will give you the char directly, ex: "a", "1", "LeftArrow" – Gaffney

Even better in its VanillaJS version: document.addEventListener("keydown", function(e){ console.log(e.which); }); – Autotoxin

Answer 3

For mouse events, I know that in Firefox at least the "shiftKey" property on the event object will tell you if the shift key is down. It's documented at MSDN but I haven't tried it in forever so I don't recall if IE does this right.

Thus you should be able to check for "shiftKey" on the event object in your "click" handler.

Sour

Indeed. This has been the case going back to the earliest days of JavaScript. – Staffman

Answer 4

I had a similar problem, trying to capture a 'shift+click' but since I was using a third party control with a callback rather than the standard click handler, I didn't have access to the event object and its associated e.shiftKey.

I ended up handling the mouse down event to record the shift-ness and then using it later in my callback.

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

Posted just in case someone else ends up here searching for a solution to this problem.

Teeny

Answer 5

For checking if the shiftkey is pressed while clicking with the mouse, there is an exact property in the click event object: shiftKey (and also for ctrl and alt and meta key): https://www.w3schools.com/jsref/event_shiftkey.asp

So using jQuery:

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

Fantail

Answer 6

The keypress event isn't triggered by all browsers when you click shift or ctrl, but fortunately the keydown event is.

If you switch out the keypress with keydown you might have better luck.

Tantalize

Well but the problem is he won't know for sure whether the shift key is pressed. Oh but I guess if the flag is set for "keyUp" too, then it'd be possible to detect when "click" is bracketed by the key events. – Sour

Answer 7

I have used a method to test if any specific key is pressed by storing the currently pressed key codes in an array:

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

Here is the jsfiddle

Mackinaw

Cool solution but it needs a minor fix on keyup: while (idx >= 0){ keysPressed.splice(idx, 1); idx = avpg.keysPressed.indexOf(e.keyCode); } Otherwise, only the first occurence of a keypress is removed. To notice this, hold down shift for a few seconds. The array fills up with shift codes, but only one of them is removed on keyup. – Eisk

Or patch: case "keydown": { if (!this.keysPressed.includes(e.keyCode)) { this.keysPressed.push(e.keyCode); } break; } – Eighty

Answer 8

The excellent JavaScript library KeyboardJS handles all types of key presses including the SHIFT key. It even allows specifying key combinations such as first pressing CTRL+x and then a.

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

If you want a simple version, head to the answer by @tonycoupland):

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

Aneroidograph

@downvoters: Please leave a comment why you downvote – Aneroidograph

Answer 9

This works great for me:

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

Whirl

Answer 10

A more modular approach plus the ability to keep your this scope in the listeners:

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

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

Euphemia

Answer 11

If anyone's looking to detect a given key and needs to know the status of the "modifiers" (as they are called in Java), i.e. Shift, Alt and Control keys, you can do something like this, which responds to keydown on key F9, but only if none of the Shift, Alt or Control keys is currently pressed.

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

Gothicize

Answer 12

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

demo

Futuristic