{"id":1639,"date":"2019-03-05T05:05:24","date_gmt":"2019-03-05T05:05:24","guid":{"rendered":"https:\/\/blog.hassler.ec\/wp\/?p=1639"},"modified":"2019-02-28T03:22:49","modified_gmt":"2019-02-28T03:22:49","slug":"how-to-detect-a-sequence-of-keystrokes-in-javascript","status":"publish","type":"post","link":"https:\/\/blog.hassler.ec\/wp\/2019\/03\/05\/how-to-detect-a-sequence-of-keystrokes-in-javascript\/","title":{"rendered":"How to detect a sequence of keystrokes in JavaScript"},"content":{"rendered":"
\n

<\/h1>\n<\/div>\n
\n
Photo by Aleksandar Cvetanovic<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n<\/div>\n
\n

One of the most used features of JavaScript is its ability to react on various events that may occur while the user interacts with the web page. In fact, that was the very idea of JavaScript when it appeared, to make web pages dynamic by adding some interactivity to them. With JavaScript we can react when a user clicks on a specific part of the page, when a key is pressed, when mouse moves, when the page is loaded, when an element gets focused, etc.<\/p>\n

For the list of all JavaScript events available check this MDN page<\/a>.<\/p><\/blockquote>\n

Even though today JavaScript can be used to do so much more, this basic feature of adding interactivity to the web page is still widely used to provide the users with rich and interesting experiences.<\/p>\n

In this article, we will be looking into how we can use JavaScript to react to the keyboard events, specifically, how to react to the specific key sequence that the user types. So, when the user presses a key combination, the web page might show some content, like opening a menu or a modal, it can change the styling of the page or perform any other action you can imagine which is within the JavaScript capabilities.<\/p>\n

\n
\n
<\/div>\n
<\/div>\n<\/div>\n<\/figure>\n

Before we start I just want to point out that I\u2019m using some ES6 features like <\/em>const<\/em><\/a><\/code>and<\/em>let<\/em><\/a><\/code>, the <\/em>spread operator<\/em><\/a> (<\/em>...<\/em><\/code>), <\/em>arrow functions<\/em><\/a>, <\/em>etc.<\/em><\/a> If you are not familiar with those, check the provided links to learn more.<\/em><\/p>\n

What are we building?<\/h3>\n

For this article I\u2019ve decided to make an element on the page change its background image based on the sequence of keys the user types. So we are basically dealing with the styling, nothing too fancy. We will also add some text updates as well just to make the demonstration richer and to provide more info to the user.<\/p>\n

My idea was to use the key sequences that are used as cheat codes in an old FPS game, Doom and Doom 2. Basically, when the user types a key combination, the game enables some benefits to the user, like more ammo, more health, invulnerability, etc.<\/p>\n

In the example that we will build, we will make the background image for an element on the page to change based on the key sequence typed in by the user. You can see and try the demo here<\/a>.<\/p>\n

Basic project<\/h3>\n

In order to focus only on JavaScript, I\u2019ve created complete HTML and CSS for the project, and linked the JavaScript file which only contains a console log to make sure it works. You can download the initial project files here<\/a> or you can create your own if you like to have it made your own way.<\/p>\n

Here is quick breakdown of the JavaScript content we initially have.<\/p>\n

\n
\n
\n
document.addEventListener('DOMContentLoaded', () => {\n    'use strict';\n\n    console.log('content loaded');\n});<\/pre>\n<\/div>\n<\/div>\n<\/figure>\n
It\u2019s pretty straightforward, we add an event listener to the document that waits until the DOM is fully loaded and then calls the callback function. The callback function currently only has the 'use strict'<\/code> statement and a console log to verify that the file is correctly linked to the HTML page.<\/p>\n
We can omit this event listener and the callback that is passed to it, but then the script file should be placed at the end of the body<\/code> HTML element to make sure that the DOM is fully loaded when the javascript starts executing. If you choose so, feel free to do it. This is just my preferred way of doing it, with the benefit that it also encapsulates all of the JavaScript code into a function and avoids global scope pollution.<\/p><\/blockquote>\n
Listening to the key Events<\/h4>\n
The next step would be to detect when the user presses a key. We do that the same way we added the listener for the DOMContentLoaded<\/code> event, but now we will specify a different event name. There are three keyboard events<\/a> that we can specify: keydown<\/code>, keyup<\/code> and keypress<\/code>.<\/p>\n