![JavaScript Keyboard Events [In-Depth Tutorial]](/javascript-keyboard-events/javascript-keyboard-event.jpg)
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)
