jQuery key code for command key

Question

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.

Concealment

jQuery normalizes the key code in event.which. You can test it at api.jquery.com/keydown/#target Besides, browser sniffing is hardly ever necessary and almost always a bad practice. – Mandle

Even that keydown test shows that Firefox gives the command key a 224 and Safari/Chrome give it a 91. – Concealment

It's even more difficult, as, according to unixpapa.com/js/key.html the right command key gets a value of 93. – Mandle

@Marcel: Yes, I got the same on my Mac. – Cocks

Answer 1

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.

Coelenterate

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. – Concealment

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). – Tubercle

@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. – Gladisgladney

jQuery does not set metaKey when Control key is pressed on Windows. So you do need if (e.metaKey || e.ctrlKey) {...} – Dympha

Answer 2

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.

Cocks

True, but he is using jQuery's keydown, which normalizes the key code in the which property of the Event interface. – Mandle

@Jason: Heh. I saw it another answer and had been waiting for an excuse to use it :) – Cocks

+1 for the link to unixpapa.com/js/key.html that contains really good explanation of the problem – Dudley

Answer 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>

Figural