In this tutorial we’ll be creating keyboard shortcuts that can be used in web apps. These are particularly handy when you want to give users the ability to save or copy data, navigate, or control playback of media all via the keyboard.
First thing we’ll need to do is create an object with the keys we want to use as shortcuts:
The shortcuts we are creating will be triggered using the control or command keys in conjunction with another alphabetical key.
Control here represents the control key whilst
Meta represents the command key on macOS devices.
Next we’ll setup a
keydown event listener that calls a
This function sets the value of the key in the
keyDown object to
true. In this example we are checking if the “c” key has been pressed along with either the “Control” or “Meta” keys. As we’ve built it this way we could check for any number of key combinations pressed simultaneously.
To finish we just need to add a
keyup event listener that resets the key value to