In this tutorial, we will learn how to detect arrow key presses in JavaScript. Arrow keys are commonly used for navigation and interactions within web applications, especially in games, form handling, and custom navigation interfaces.
We will explore how to capture these key presses and execute specific functions when they are pressed.
Event Handler Used
We can use either the onkeyup() or onkeydown() event handler to detect key presses.
HTML Code:
<h1>Arrow Key Detection</h1>
<h2>Press an arrow key to see the result:</h2>
<h3 id=”arrow-output”></h3>
<p id=”instruction”>Press any arrow key (Up, Down, Left, Right)</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detect Arrow Key Presses</title>
</head>
<body>
<h1>Arrow Key Detection</h1>
<h2>Press an arrow key to see the result:</h2>
<h3 id="arrow-output"></h3>
<p id="instruction">Press any arrow key (Up, Down, Left, Right)</p>
<script src="script.js"></script>
</body>
</html>
Step 2: Writing JavaScript Code
Next, let’s write the JavaScript to detect the arrow key presses.
JavaScript Code
Open a new file called script.js and add the following code:
document.addEventListener('keydown', function(event) {
const arrowOutput = document.querySelector('#arrow-output');
const instruction = document.querySelector('#instruction');
if (event.key === 'ArrowUp' || event.keyCode === 38) {
arrowOutput.textContent = 'Up Arrow';
} else if (event.key === 'ArrowDown' || event.keyCode === 40) {
arrowOutput.textContent = 'Down Arrow';
} else if (event.key === 'ArrowLeft' || event.keyCode === 37) {
arrowOutput.textContent = 'Left Arrow';
} else if (event.key === 'ArrowRight' || event.keyCode === 39) {
arrowOutput.textContent = 'Right Arrow';
} else {
instruction.textContent = 'Please press only the arrow keys.';
}
});
Step 3: Understanding the JavaScript Code
We start by adding an event listener to the document to listen for the keydown event. Inside the event handler function, we check the event.key or event.keyCode to determine which arrow key was pressed and update the text content of the <h3> tag accordingly. If a non-arrow key is pressed, we update the <p> tag with an instruction message
Key Codes:
-
- Key Codes:
Up Arrow: key is “ArrowUp” or keyCode is 38
Down Arrow: key is “ArrowDown” or keyCode is 40
Left Arrow: key is “ArrowLeft” or keyCode is 37
Right Arrow: key is “ArrowRight” or keyCode is 39Step 4: Adding Some Styling
For a better visual experience, let’s add some basic CSS styling.
CSS Code
Add the following styles inside a <style> tag in the <head> section of your HTML file or in a separate CSS file:
body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } h1 { color: #333; } h2 { color: #555; } h3 { color: #007BFF; font-size: 2em; } p { color: #777; font-size: 1.2em; }
Output
When you press the down arrow key, the <h3> tag content will be updated to “Down Arrow”.
Now the complete setup to detect arrow key presses in JavaScript and display the corresponding arrow key pressed
- Key Codes:
