jQuery key code for command key

JavascriptJqueryCommandKeydownOnkeyup

Javascript Problem Overview


I have read https://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed and https://stackoverflow.com/questions/2445613/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.

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

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.

Solution 3 - Javascript

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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCraigView Question on Stackoverflow
Solution 1 - JavascriptBrunoLMView Answer on Stackoverflow
Solution 2 - JavascriptTim DownView Answer on Stackoverflow
Solution 3 - JavascriptFlimmView Answer on Stackoverflow