When configuring Ace (the text editor), you can use OS specific keybindings, like {win: "Ctrl-Esc", mac: "Cmd-Esc"}. This shows that you can have OS specific keybindings in JavaScript, but how is it done?

I would like to create shortcuts that use Cmd on OS X and Ctrl on other systems.

When configuring Ace (the text editor), you can use OS specific keybindings, like {win: "Ctrl-Esc", mac: "Cmd-Esc"}. This shows that you can have OS specific keybindings in JavaScript, but how is it done?

I would like to create shortcuts that use Cmd on OS X and Ctrl on other systems.

• javascript
• macos
• keyboard-shortcuts
• keyboard-events

Share Improve this question Follow edited Mar 3, 2016 at 1:27 Carl Younger asked Mar 13, 2015 at 13:09 Carl YoungerCarl Younger 3,0802626 silver badges3838 bronze badges 5

• I didn't downvote, but straight from the Close/Flag reasons: "Questions asking us to remend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow." – LittleBobbyTables - Au Revoir Commented Mar 13, 2015 at 14:25
• 2 Close voters: please read the question carefully! He is not asking for remendations. He would prefer a plain solution, but adds that a ment remending libraries would still be helpful. – S.L. Barth is on codidact. Commented Mar 13, 2015 at 14:30
• 1 @S.L.Barth - then it would be better to remove the blurb about ments suggesting libraries. Otherwise, that's like saying, "I know remendations are off-topic, so don't provide them as an answer, just as a ment, and everything's cool." Doesn't jive. Remendations are off-topic as a reason, and trying to circumvent that is just going to raise eyebrows and cause the votes you're seeing here. – LittleBobbyTables - Au Revoir Commented Mar 13, 2015 at 14:37
• 3 @LittleBobbyTables I don't think he's trying to circumvent the rules. But I agree that that blurb was better left out. Carl Smith, I could edit it out, but I'd prefer to leave the decision to you. If it were my question I'd remove the last sentence. – S.L. Barth is on codidact. Commented Mar 13, 2015 at 14:41
• Done. Thanks for the feedback. I guess it wasn't clear. – Carl Younger Commented Mar 13, 2015 at 15:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Unfortunately at this time there is no JavaScript API for detecting if the host OS uses the Ctrl key or the Cmd key for keyboard shortcuts. The only way to determine this is to use platform sniffing.

This is usually done though the use of the navigator.platform property. In fact, the library you mention, Ace editor, actually does it this way. This property also has the advantage that it will not change if you change the user-agent string (at least not normally). On macOS, navigator.platform returns a string like MacProcessor, or MacIntel on an Intel-based Mac.

It's technically deprecated though (but not likely to be removed any time soon), and some browsers have implemented a newer navigator.userAgentData.platform property in secure contexts only (takes the form of macOS on macOS).

With this knowledge, we can craft a regular expression that will match whichever property is available. Something like the following should be safe and future-proof.

/mac/i.test(navigator.userAgentData ? navigator.userAgentData.platform : navigator.platform);

Now we just need to use the boolean return value from this statement, to determine if our shortcut key should be e.metaKey, or e.ctrlKey.

Working Example:

var isMac = /mac/i.test(navigator.userAgentData ? navigator.userAgentData.platform : navigator.platform);

window.addEventListener('keydown', function(e) {
    if (e.keyCode === 67 && (isMac ? e.metaKey : e.ctrlKey)) {
        document.getElementById('textarea').value += 'Thanks ' + (isMac ? 'Mac' : 'Non-Mac') + '!\n';
    }
});

<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> on Mac, or <kbd>Ctrl</kbd> + <kbd>C</kbd> on everything else.</p>

<textarea id="textarea" style="width: 100%; height: 100px;" placeholder="Click me then use shortcut keys."></textarea>

Alternately:

You might also consider just allowing the user to use either shortcut on any platform.

Working Example:

window.addEventListener('keydown', function(e) {
    if (e.keyCode === 67 && (e.metaKey || e.ctrlKey)) {
        document.getElementById('textarea').value += 'Thanks!\n';
    }
});

<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> or <kbd>Ctrl</kbd> + <kbd>C</kbd>.</p>

<textarea id="textarea" style="width: 100%; height: 100px;" placeholder="Click me then use shortcut keys."></textarea>