Combination Keydown function not working for Mac Keyboard

Question

I'm trying to show the Searchbar on my application using keyboard shortcuts.

While the keyboard shortcuts work perfectly using a Windows keyboard, the code fails when I'm using a Mac machine with a Mac keyboard.

Following is the function which I've written -

var osName = "Unknown OS";
if (navigator.appVersion.indexOf("Win") != -1) osName = "Windows";
if (navigator.appVersion.indexOf("Mac") != -1) osName = "MacOS";

function showSearchBarOnKeyPress() {
        $(document).keydown(function (e) {
            if ((e.ctrlKey && e.altKey && e.key === "z") || (osName === "MacOS" && e.keyCode === 90 && e.keyCode === 17 && e.keyCode === 91)) {
                searchBarIsShown();
            }
        });
    }

Initially I didn't have the '||' condition in the 'If' statement. The first condition works when using a Windows keyboard. When I checked on a Mac it didn't work. So I had to put in the '||' condition.

For the MacOS condition initially I had used keycodes - 59,55 and 6 as shown in this reference - https://eastmanreference.com/complete-list-of-applescript-key-codes

On checking in the Mac machine, the keycodes detected were - 90,91 and 17 which I then replaced.

But it still doesn't work.

Can someone please provide their insights/thoughts on this issue?

Thanks

Try without if statement first (after `$(document).keydown(function (e) {...`) — Itang Sanjana, Jun 07 '19 at 08:02
Please provide a Minimal, Complete, and Verifiable Example ([MCVE](https://stackoverflow.com/help/mcve)). — Jimmy Adaro, Jun 07 '19 at 08:39
Just want to check... Are you sure you got correct `keyCodes`? On one hand you have ctrl+alt+z the other one (MacOS) suggests z+control+command keys. Note on Mac usually switch `ctrl` key with `command` key on Mac. — Dakota Jang, Jun 07 '19 at 08:40
in mac there is event.metaKey. see this [question](https://stackoverflow.com/questions/8302744/will-this-hotkey-work-for-mac-users). — Noam, Jun 07 '19 at 08:56

score 2 · Answer 1 · answered Jun 07 '19 at 08:41

e.ctrlKey and e.altKey are special properties on the KeyboardEvent object that contain the state of these buttons.

e.keyCode === 90 && e.keyCode === 17 && e.keyCode === 91

the property e.keyCode can not be three differrent values at once.

I have little experience with apple but I assume you'd have to manually keep track of the state of these buttons.

a simple statemanager would be:

const keyDown = Object.create(null);
$(document).on("keydown keyup", e => keyDown[e.keyCode] = e.type === "keydown");

so now you can check all three Buttons at once:

keyDown[90] && keyDown[17] && keyDown[91]

You don't need a state manager; just correct logic in your logic expression is enough :) — Amadan, Jun 07 '19 at 09:35

Noam · Accepted Answer · 2019-06-07T10:39:30.233

2

try this: metaKey is cmd key on mac. altKey is the option key on mac.

var osName = "Unknown OS";
if (navigator.appVersion.indexOf("Win") != -1) osName = "Windows";
if (navigator.appVersion.indexOf("Mac") != -1) osName = "MacOS";

function showSearchBarOnKeyPress() {
    $(document).keydown(function (e) {
    var modifier = (navigator.appVersion.indexOf("Mac") != -1) ? e.ctrlKey : e.metaKey;
        if (modifier && e.altKey && e.key === "z") {
            searchBarIsShown();
        }
    });
}

note that metaKey is not supported on old browseres..

edited Jun 07 '19 at 10:39

answered Jun 07 '19 at 09:05

Noam

333
1
18

and that metaKey represents the windows-key on windows. – Thomas Jun 07 '19 at 09:38
Noam and @Thomas : Thank you for your inputs. The event.metaKey did the trick. One thing is still unclear to me though - Do key combinations differ for different keyboards ? For Windows I had Ctrl+Alt+z , whereas for Mac this wasn't the case - I had to use Meta(Command)+Shift+z. Even for Windows if I tried to use - Ctrl+Shift+z it wasn't working. Like are there any specific key combinations which can be manipulated by code ? – T-Bone Jun 12 '19 at 12:27

Combination Keydown function not working for Mac Keyboard

2 Answers2