How to Capture User Keystrokes With Vanilla Javascript
These days I am in the mood for ditching big libraries and having my own mini libraries or a few lines of code only for using the things I need.
It’s not that I don’t like the libraries we have, it’s that sometimes I just want to have only the things I need for my project.
Why should I map all the keys if I just want two or three of them?
Enough with the developers guilt that loves abstraction layers. Let’s proceed with our script.
An example I came accross while I was reading the https://webtypography.net/ site — it’s great, give it a try — was using keys to navigate through artiles. I know, I am a lazy person, but I miss this when I read tutorials with page sections or a book like site. It’s a small script and won’t affect the no javascript users.
Let’s start by creating a function that captures keystrokes. After we include this in a script, the browser will execute this function for every key press.
If you use this function in your document, for every keystroke the browser will log I stroke a key
.
The e
parameter is the event itself that is going to give us the unicode character of the key we pressed.
Now we need to tell this function what to do when a specific key is pressed. In this case we need to map the right and left arrow key to send us to the next page or previous page.
And that’s it!
You can use whatever key you want without using any library, or create your own lightweight ‘plugin’ for a number of keys! Here is a list of keycodes from the Toptal website.