How to handle cross-platform keyboard shortcuts with Alt + Z (Windows) / Option + Z (macOS) across different keyboard layouts?

Question

I’m trying to implement a keyboard shortcut that triggers when the user presses: • Windows/Linux: Alt + Z • macOS: Option + Z

The problem is with using event.code === 'KeyZ'. It works fine on a QWERTY keyboard, but breaks on other keyboard layouts (e.g., AZERTY or Dvorak), where the 'Z' key might be in a different physical position.

I want the shortcut to work based on the character ('z' or 'Z'), not the physical key.

How can I reliably detect Alt/Option + Z across platforms and keyboard layouts using JavaScript?

What I’ve tried:

        filter((event: KeyboardEvent) => event.altKey && event.code === 'KeyZ'),

Any best practices for layout-independent shortcut handling?

Diarmid Mackenzie · Accepted Answer · 2025-06-24 09:47:21Z

0

You should check event.key instead of event.code.

Because CapsLock may be enabled, or Shift held down, you'll need to check for both 'Z' or 'z', or do something like this:

filter((event: KeyboardEvent) => event.altKey && event.key.toLowerCase() === 'z'),

As per docs here: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

The KeyboardEvent.code property represents a physical key on the keyboard (as opposed to the character generated by pressing the key)

Also here: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

The KeyboardEvent interface's key read-only property returns the value of the key pressed by the user, taking into consideration the state of modifier keys such as Shift as well as the keyboard locale and layout.

answered Jun 24 at 9:47

Diarmid Mackenzie

8267 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Giorgi Mamisashvili Jul 8 at 16:34

Thanks for you response. actually event.key works different on mac, when using option + s it produces different key on this platform and on different layout

Collectives™ on Stack Overflow

How to handle cross-platform keyboard shortcuts with Alt + Z (Windows) / Option + Z (macOS) across different keyboard layouts?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related