How can i check if key is pressed during click event with jquery?

Question

Hi,

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. for example:

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

Does anyone know if this is possible at all or how it can be done if it is possible?

Answer 1

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

Answer 2

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.

Answer 3

Thanks everyone that was great and answered my question perfectly.