I have something rather embarrassing to admit. At some point, for reasons that I can't remember, when I switched over to using a MacBook about a decade ago, I somehow got it in my head that the
event.metaKey represented a "generic modifier" that worked across operating systems. Meaning, I assumed that the
event.metaKey was associated with different key combinations on different operating systems. To be clear, this is wrong. And, for years, I've built some key-combinations that only work on MacOS. Which is crazy, especially considering that no one ever complained about it! I suppose that's because most of those key-combinations are "progressive enhancements" to the user experience (UX). That said, I wanted to write this down so that I never forget that different keyboard event modifiers need to be captured on different operating systems.
CAUTION: At the outset of this demo, I want to be clear that detecting the current operating system is a bit of a dark-art. Every approach that I can find currently uses some form of
window.navigator inspection. And, the properties being inspected are typically deprecated by web standards and are only provided by browsers for backwards compatibility. As such, we should take care to isolate this logic somewhere in our application in a way that is abstracted and reusable. This way, when / if it breaks, we only need to update the logic in a single point-of-failure.
That said, I grabbed the OS-detection logic from the
tinykeys library, which uses the
navigator.platform property. Thanks to Matt Vickers for this suggestion!
On the Mac - and related Mac platforms - the common keyboard modifier is the
Meta key (aka, the
Command key). On all other platforms, the common keyboard modifier is the
Control key. So, to intercept the "Print Page" command on the Mac, we'd have to bind to the
Command+P key-combination; and, to do the same on Windows, we'd have to bind to the
To paper-over this divergence, a number of keyboard event-binding libraries will provide a pseudo key -
Mod (Modifier) - that allows the developer to define key-combinations without having to use OS-specific modifiers. So, instead of
Command+P for printing, the developer would use
Mod+P and the event-binding library translates that to the OS-specific version.
To showcase this concept, this demo simply detects
keydown events and determines whether or not those events have been "modified". It does this by building-up an OS-specific modifier object on boot-up; and then, uses that object to inspect different keys on the subsequent
As you can see, when this page runs, we create a
osModifier object. This object contains an operating-system-specific configuration. It is the "abstraction" that we can use later when inspecting the keyboard
event. And, in fact, when we do inspect the
event, you can see that we are using the
event[ osModifier.modifier ]
Now, if we run this on the MacOS and try using both the
Meta) key and the
Control key, you can see that only the
Command key is considered a modifier:
And, if I boot-up my VirtualBox Windows image, you can see that when I use the
Control key, that is the modifier:
So, anyway, this was all just a note to myself so that I don't even forget about cross-operating-system keyboard event bindings again!
Want to use code from this post? Check out the license.
Post A Comment — ❤️ I'd Love To Hear From You! ❤️
❤️ ❤️ Thank You For Your Comment ❤️ ❤️
In order to keep this website fun, safe, and full of those sweet, sweet feelings, your comment has been submitted for approval.