Events are the life of interactive webpages, and without JavaScript, there is so much we can do. With JavaScript, the language developers give us built-in functions that allow us to work with events and connect certain actions to them. Here, our focus is on keyboard events (there are mouse events too) in JavaScript. It allows developers to perform various actions based on keyboard events.
In this article, we will discuss three keyboard events - keydown, keypress, and keyup - and how we can create them using the addEventListener() methods in JavaScript
Different Keyboard Events in JavaScript
Keyboard events are actions that occur in the browser when a user presses or releases a keyboard key. In JavaScript, keyboard events can be used to perform specific actions in response to keyboard input. We have three main keyboard events in keydown, keyup and keypress. Let’s start with keydown.
Using the keydown event in JavaScript
The keydown event is fired when a keyboard key is pressed down. This event is fired repeatedly while the key remains pressed. The keydown event can be used to perform actions when a key is first pressed, such as moving an object in a specific direction. For us to access the keydown event, we need the the key/code so that we can connect an action to the event.code.
Here is an example of how we can craft a keydown event in JavaScript. In this example, we create a simple webpage where if we press G, it grows the box. However, if we press S, it shrinks the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Keyboard Event</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: deeppink;
margin: 0 20px 20px 0;
}
</style>
</head>
<body>
<h1>Understanding JavaScript Mouse Events</h1>
<p id="text">
Keyboard Events are wonderful to work with, and probably make a lot
of sense as users will use keyboards to interact with your site.
</p>
<p>Press <b>G</b> to grow box</p>
<p>Press <b>S</b> to shrink box</p>
<div id="box"></div>
</body>
<script src="script.js"></script>
</html>
The script.js file
let box = document.getElementById("box");
document.addEventListener("keydown", function (event) {
if (event.code === "KeyG") {
box.style.width = "300px";
box.style.height = "300px";
}
if (event.code === "KeyS") {
box.style.width = "100px";
box.style.height = "100px";
}
});
Output
In the code, we select the div that has the box with getElementById() method. Afterwards, we use the addEventListener() method to apply the keydown event and pass the anonymous function that will serves as the listener. Inside this anonymous function, we check the event.code and see if it is either KeyG or KeyS and execute the properties changes for their respective if blocks.
Using the keypress event in JavaScript
In another keyboard event, the keypress event is fired when a keyboard key is pressed and then released. It is used to detect the actual character that is entered by the user. The keypress event can be used to perform actions when a specific character is entered, such as starting a search when the Enter key is pressed.
Just as with the keydown event, we need a charCode that will tell us what the keyboard is doing at the point in time. We can simply recreate the same example with changes to the event type and charCode data.
let box = document.getElementById("box");
document.addEventListener("keypress", function (event) {
if (event.charCode === 103) {
box.style.width = "300px";
box.style.height = "300px";
}
if (event.charCode === 115) {
box.style.width = "100px";
box.style.height = "100px";
}
});
Output
However, you should know that the keypress event has been deprecated and you can simply use the keydown event in place.
Using the keyup event in JavaScript
The keyup event is fired when a keyboard key is released. This event is fired only once, even if the key is held down for an extended period of time. The keyup event can be used to perform actions when a key is released, such as stopping an object from moving when a key is released.
For us to access the keyup event, we need the the key/code so that we can connect an action to the event.code. To illustrate how we can work with the keyup event, we will modify the example (using the same HTML) to work with arrow keys where the left key reduces the box and the right key increases the box.
let box = document.getElementById("box");
document.addEventListener("keyup", function (event) {
if (event.code === "ArrowRight") {
box.style.width = "300px";
box.style.height = "300px";
}
if (event.code === "ArrowLeft") {
box.style.width = "100px";
box.style.height = "100px";
}
});
Output
Summary
JavaScript keyboard events provide a way for developers to respond to user interactions with the keyboard. By using the keydown, keypress, and keyup events, developers can create interactive and responsive web applications that respond to keyboard input in real-time. These events can be used to perform specific actions based on which keys are pressed, such as starting a search or moving an object on the screen. The examples above show how the keydown, keypress, and keyup events can be used in JavaScript to perform actions based on keyboard input. However, do remember that the keypress have been deprecated along with the charCode property.
References
KeyboardEvent.code - Web APIs | MDN (mozilla.org)
EventTarget.addEventListener() - Web APIs | MDN (mozilla.org)
Element: keypress event - Web APIs | MDN (mozilla.org)
KeyboardEvent.charCode - Web APIs | MDN (mozilla.org)
Element: keyup event - Web APIs | MDN (mozilla.org)
