How Does One Capture a MAC's Command Key via JavaScript

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

EDIT: As of 2019, e.metaKey is supported on all major browsers as per the MDN.

Note that on Windows, although the ⊞ Windows key is considered to be the "meta" key, it is not going to be captured by browsers as such.

This is only for the command key on MacOS/keyboards.

---

Unlike Shift/Alt/Ctrl, the Cmd (“Apple”) key is not considered a modifier key—instead, you should listen on keydown/keyup and record when a key is pressed and then depressed based on event.keyCode.

Unfortunately, these key codes are browser-dependent:

• Firefox: 224
• Opera: 17
• WebKit browsers (Safari/Chrome): 91 (Left Command) or 93 (Right Command)

You might be interested in reading the article JavaScript Madness: Keyboard Events, from which I learned that knowledge.

How can I detect macOS command keys in JavaScript

You could look on keydown/keyup and record when a key is pressed based on event.keyCode.

Or as Alexander pointed out, you can also use:

event.metaKey https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey

There are some libraries which can help you out as these keys are browser dependent

How to check if command key is pressed while clicking on a tag

You can check value of event.metaKey inside onClick of a button.

    <button
      onClick={e => {
        console.log("CLICKED", e.metaKey);
      }}
    >
      Press
    </button>

In above example, You will get value of e.metaKey as true if command is pressed.

jQuery capture CTRL + S and Command + S (Mac)

This code works for me. I tested it in Chrome (v33) Firefox (v24) and Safari (v6.1.1 ). Both Control+S and Command+S work.

$(document).keydown(function(event) {
        // If Control or Command key is pressed and the S key is pressed
        // run save function. 83 is the key code for S.
        if((event.ctrlKey || event.metaKey) && event.which == 83) {
            // Save Function
            event.preventDefault();
            return false;
        };
    }
);

Please note that I am using keydown and not keypress. In the jQuery docs they sate:

Note: as the keypress event isn't covered by any official
specification, the actual behavior encountered when using it may
differ across browsers, browser versions, and platforms.

I would avoid using it.

How to accomplish CTRL + F & CMD + F functionality with Javascript at the same time

I got it to work like so:

window.addEventListener('keydown', (e) => {
    if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70) || (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70) || (e.metaKey && e.keyCode === 70))) {
        alert('working');
    }
})

This is a working code sample.

Can't catch Cmd-S on Chrome on Mac

I think keypress as you have it doesn't register metakeys in the quite the same way, see: Diffrence between keyup keydown keypress and input events here's a fiddle that seems to work using keydown, and then capturing each in sequence. Hope it helps?

var metaflag = false;
$(document).on({ keydown: function(event) {    if (event.ctrlKey||event.metaKey || event.which === 19) {      event.preventDefault();      $('.monitor').text('key '+event.which);      metaflag = true;    }   if( metaflag && event.which === 83 ){ // 83 = s?      event.preventDefault(); // maybe not necessary      $('.display').text('saving?');      metaflag = false;    }  }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='monitor'></div><div class='display'></div>

Will this hotkey work for Mac users?

Keycodes differ in different browsers. Here you can find more information on the subject:
How does one capture a Mac's command key via JavaScript?

On my mac in Chrome I get the keycode 91 but it will differ, in the linked post these are mentioned:
Firefox: 224
Opera: 17
WebKit (Safari/Chrome): 91 (Left Apple) or 93 (Right Apple)

There is also a link to this page which tells all about it:
http://unixpapa.com/js/key.html

Your code does work in Chrome on Mac (pressing the cmd+Shift+P).

---

Related Topics