Mac option key

[ccccps]

What should I do for the "option" key in Mac? I tried "alt", but it doesn't work

[ccccps]

I checked the 'keydown' event, for example, Option(alt) + A It turns Alt and å Option(alt) + S It turns Alt and ß

So I need to use å, ß instead of a, s

[fgr-araujo]

I don't test all Mac keys. I will check this out and fix.

[francois2metz]

I guess it's going to be difficult. See http://blog.atom.io/2016/10/17/the-wonderful-world-of-keyboards.html.

[ststaynov]

+1 for this one

[onlinelaser]

+1 here too

[danmichaelo]

On Macs, at least those with a non-US keyboard, using alt/option in keyboard shortcuts doesn't work, because Alt combinations are used to type non-ASCII characters.

In general, keyboard shortcuts using Alt only should be avoided on Mac, while shortcuts using Ctrl only should be avoided on Windows – since most combinations are in use there.

So the solution is to have shortcuts using different modifier keys on different systems. If you go to e.g. Wikipedia you will notice that the keyboard shortcuts change depending on your system. To go to recent changes, I can press Ctrl+Option+R on Mac, while on Windows it's Alt+R.

I'm not sure if this is easy to set up with vue-shortkey though.

[AshGrowem]

@danmichaelo Any updates on this?

I can confirm that using mac opt works just fine using Vue's built-in v-on directive. Perhaps you can somehow alias v-on within your plugin?

Alternative v-on solution

Normal: v-on:keydown.alt.65 (alt & option same on mac) Shorthand: @keydown.alt.65 65 is the keycode for a, so this translates to opt + a https://vuejs.org/v2/guide/events.html#System-Modifier-Keys

Also just FYI here's Apple's official dev docs on keyboard shortcuts: https://developer.apple.com/design/human-interface-guidelines/macos/user-interaction/keyboard/

[bradley-varol]

I needed Control key and Meta key shortcuts but couldn't get the Meta key to work on Linux or MacOS so I removed this package (sorry, I use it elsewhere, promise!) and did the following:

data() {
    return {
        shortkeyListener: null,
    };
},
created() {
    this.addShortkeyListener();
},
beforeDestroy() {
    this.removeShortkeyListener();
},
addShortkeyListener() {
    this.shortkeyListener = window.addEventListener('keydown', (e) => {
        const isModifierActive = () => e.getModifierState('Control')
            || e.getModifierState('Meta')
            || e.getModifierState('OS')
            || e.getModifierState('Win');

        if (e.keyCode === 74 && isModifierActive()) {
            e.preventDefault();
            e.stopPropagation();
            this.handleShortkey();
        }
    });
},
removeShortkeyListener() {
    window.removeEventListener('keydown', this.shortkeyListener);
},

For those new to Vue or Javascript, I add a new keyup event listener to window (and remove it when the component is destroyed), and then I use KeyboardEvent.getModifierState to check for my desired modifier keys. In this case I wanted the j key to be pressed so I also checked for keyCode 74. You can read more about why I used a keyup event here.