50

I have read jQuery Event Keypress: Which key was pressed? and How can i check if key is pressed during click event with jquery?

However my question is if you can get the same key event for all browsers? Currently I know that Firefox gives the command button (Mac) the code 224 while Chrome and Safari give it the value 91. Is the best approach to simply check what browser the user is using and base the key pressed on that or is there a way so that I can get 1 key code across all browsers? Note I am getting the value with the:

var code = (evt.keyCode ? evt.keyCode : evt.which);

I would love to not use a plugin if possible just because I only need to know about the command/ctrl (windows system) key pressed.

Community
  • 1
  • 1
Craig
  • 3,043
  • 8
  • 24
  • 25
  • 2
    jQuery normalizes the key code in `event.which`. You can test it at http://api.jquery.com/keydown/#target Besides, browser sniffing is hardly ever necessary and almost always a bad practice. – Marcel Korpel Sep 30 '10 at 19:39
  • Even that keydown test shows that Firefox gives the command key a 224 and Safari/Chrome give it a 91. – Craig Sep 30 '10 at 19:48
  • It's even more difficult, as, according to http://unixpapa.com/js/key.html the *right* command key gets a value of 93. – Marcel Korpel Sep 30 '10 at 19:54
  • @Marcel: Yes, I got the same on my Mac. – Tim Down Sep 30 '10 at 21:11

3 Answers3

83

jQuery already handles that. To check if control was pressed you should use:

$(window).keydown(function (e){
    if (e.ctrlKey) alert("control");
});

The list of modifier keys:

e.ctrlKey
e.altKey
e.shiftKey

And as fudgey suggested:

e.metaKey

Might work on MAC. Some other ways here as well.

BrunoLM
  • 97,872
  • 84
  • 296
  • 452
  • 3
    I want it to be the commandkey if the OS is Mac however and ctrl if it is a Windows, so simply using the ctrlKey doesn't work. – Craig Sep 30 '10 at 19:45
  • 5
    On Windows, jQuery sets `e.metaKey` to `true` if the Ctrl key is pressed, so for what you want just `if (e.metaKey) {...}` is sufficient. However, I have the opposite problem. I want to bind a function to, say, Ctrl-X but _not_ to Command-X. I couldn't find an elegant way of doing this (I mean, without checking the user agent). – Vess Feb 26 '12 at 08:21
  • 8
    @Vess, if you want just `Ctrl+X`, just check `e.ctrlKey`. If you want just `Command+X` but not `Ctrl+X`, check `e.metaKey && !e.ctrlKey`. – Nick May 22 '12 at 11:46
  • 4
    jQuery does not set metaKey when Control key is pressed on Windows. So you do need `if (e.metaKey || e.ctrlKey) {...}` – Shital Shah Jan 12 '14 at 10:46
11

If you're not interested in the the exact moment the Command key is pressed, just whether it is pressed when another key is pressed, then you can use the metaKey property of the event.

Otherwise, for keydown and keyup events, the property you need is keyCode in all browsers. Unfortunately, the Command key does not have the same key code in all browsers, and the left and right Commands have different values in WebKit (91 and 93 respectively). I can't see an easy way of detecting these keys without some kind of browser sniff, but there may be one. The which property definitely won't help you.

For more information, http://unixpapa.com/js/key.html has comprehensive coverage of key event handling in all the major browsers.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
3

Here you go, try this live in this runnable code snippet:

$(window).on('keypress', function(event) {
  $("body").append($("<p>").text(
       "ctrlKey " + event.ctrlKey
    + "; altKey " + event.altKey
    + "; metaKey " + event.metaKey
    + "; shiftKey " + event.shiftKey
    + "; isCommandPressed " + isCommandPressed(event)
  ));
  
});

function isCommandPressed(event) {
  return event.metaKey && ! event.ctrlKey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Focus on this select control and try pressing keys:</p>

<p><select><option>Test</option></select></p>
Flimm
  • 136,138
  • 45
  • 251
  • 267