How to capture a Mac's command (⌘) key press in JavaScript?

You can also look at the event.metaKey attribute on the event if you are working with keydown events. Worked wonderfully for me! You can try the JavaScript here.

You can also see more details on this keycode tester page.

I found that you can detect the command key in the latest version of Safari (7.0: 9537.71) if it is pressed in conjunction with another key. For example, if you want to detect ⌘+x:, you can detect the x key AND check if event.metaKey is set to true. For example:

var key = event.keyCode || event.charCode || 0;
console.log(key, event.metaKey);

When pressing x on it's own, this will output 120, false. When pressing ⌘+x, it will output 120, true

This only seems to work in Safari - not Chrome

Basing on Ilya's data, I wrote a Vanilla JS library for supporting modifier keys on Mac: https://github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js

Just use it like this, e.g.:

document.onclick = function (event) {
  if (event.shiftKey || macKeys.shiftKey) {
    //do something interesting
  }
}

Tested on Chrome, Safari, Firefox, Opera on Mac. Please check if it works for you.

keyCode and which are now deprecated so it's advisable to avoid the answers that use those here.

One way to do this now is using the key property on the event argument that comes with DOM keyup and keypress events. Here's a simple example of how to do it:

document.onkeypress = (event) => {
    if (event.key === 'Meta') {
        console.log("Mac or Windows key was pressed!");
    } else {
        console.log("Another key was pressed")
    }
}

This will trigger on the cmd key press on Mac (See Meta on the MDN docs). The only thing to note here is it will also trigger on the Windows key press too for the users keyboard/OS that support it.

If you need more granular understanding of which Meta key has been pressed, you can use the code property on event which can be either MetaLeft or MetaRight depending on which physical meta key ( cmd) was pressed.

For people using jQuery, there is an excellent plugin for handling key events:

jQuery hotkeys on GitHub

For capturing ⌘+S and Ctrl+S I'm using this:

$(window).bind('keydown.ctrl_s keydown.meta_s', function(event) {
    event.preventDefault();
    // Do something here
});

Here is how I did it in AngularJS

app = angular.module('MM_Graph')

class Keyboard
  constructor: ($injector)->
    @.$injector  = $injector
    @.$window    = @.$injector.get('$window')                             # get reference to $window and $rootScope objects
    @.$rootScope = @.$injector.get('$rootScope')

  on_Key_Down:($event)=>
    @.$rootScope.$broadcast 'keydown', $event                             # broadcast a global keydown event

    if $event.code is 'KeyS' and ($event.ctrlKey or $event.metaKey)       # detect S key pressed and either OSX Command or Window's Control keys pressed
      @.$rootScope.$broadcast '', $event                                  # broadcast keyup_CtrS event
      #$event.preventDefault()                                             # this should be used by the event listeners to prevent default browser behaviour

  setup_Hooks: ()=>
    angular.element(@.$window).bind "keydown", @.on_Key_Down              # hook keydown event in window (only called once per app load)
    @

app.service 'keyboard', ($injector)=>
  return new Keyboard($injector).setup_Hooks()

var element = //the DOM element to listen for the key on.
element.onkeyup = function(e) {
   if(e.metaKey) {
      //command key was pressed
   }
}

document.addEventListener('keydown', (e) => {
    if((e.key == 'Meta' && /Mac OS/.test(navigator.userAgent)) || e.ctrlKey) {
      // CTRL or CMD pressed
    }
})

With a KeyboardEvent.metaKey: boolean

fromEvent(window, 'keydown').pipe(takeUntil(this._ngUnsubscribe)).subscribe(
  (res: KeyboardEvent) => {
    console.log(res.metaKey && res.key === 'Enter');
  }
);

This example is for RxJS' fromEvent but applies to any KeyboardEvent.

This show capture the mac command and windows ctrl

#Mac command

$("#my_input").on('change keyup input', function() {
    var e = window.event || e; var key = e.keyCode; if(key == 93) {
        alert("Hello");
}
});

#Windows ctrl

$("#my_input").on('change keyup input', function() {
    var e = window.event || e; var key = e.keyCode; if(key == 17) {
        alert("Hello");
}
});

#Both

$("#my_input").on('change keyup input', function() {
    var e = window.event || e; var key = e.keyCode; if(key == 17 || key == 93) {
        alert("Hello");
}
});

if you use Vuejs, just make it by vue-shortkey plugin, everything will be simple

https://www.npmjs.com/package/vue-shortkey

v-shortkey="['meta', 'enter']"·
@shortkey="metaEnterTrigged"