How can I check if a key is pressed during the click event with jQuery?

Question

I would like to catch a click event with jQuery and be able to tell if a key was pressed at the same time so I can fork within the callback function based on the keypress event.

For example:

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

Is this possible at all or how can it be done if it is possible?

Solution 1

You can easily detect the shift, alt and control keys from the event properties;

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

See quirksmode for more properties. If you want to detect other keys, see cletus's answer.

Solution 2

You need to separately track the key status using keydown() and 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;
  }
});

See the list of key codes. Now you can check that:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});

Solution 3

I was able to use it with JavaScript alone

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

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }

Solution 4

Without stealing @Arun Prasad's thunder, here is a pure JS snippet I rehashed to stop the default action, which would otherwise open a new window if CTL+click is pressed.

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>

View more solutions

Comments

[Lordn__n]

I don't see that property on the jQuery Event object: api.jquery.com/category/events/event-object

[kkyy]

Well, as the page says, "Most properties from the original event are copied over and normalized to the new event object." ctrlKey, altKey etc. are part of the ecmascript standard (see the first link on the aforementioned jquery api page), so (at least in decent browsers) the event object usually has also those properties set.

[Admin]

Quirks mode only says these are defined in a key event .. no mention about a mouse event.

[Flat Cat]

One down side of this method (not that I know a better way) is if you are detecting the ALT key, and the user ALT-Tabs to another window, then the keyup event is not detected by the browser because it occurred on another application. From that point, jquery thinks the key is down, until they keyup within your jquery app. This only matters with the ALT key, as far as I can imagine.

[F Lekschas]

You can even detect Mac OS X's command key using if (e.metaKey) alert('Command down'). Here's a nice article about key events in JS unixpapa.com/js/key.html

[murftown]

For Mac OS X that would be Cmd-Tab, but I think the principal still holds

[Seeven]

Or Ctrl+Tab for changing browser's tab

[vr_driver]

Further to that, I made a small adjustment and a pen: codepen.io/vr_driver/pen/YRoRYO