How does one capture a Mac's command key via JavaScript?

user_113678 0
Viewed 159261

How does one capture a Mac's Cmd key via JavaScript?

dom-events javascript
9 Answers

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

user_27195380

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

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.

user_13634840
user_55635330
Related