Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Detecting arrow key presses in JavaScript?
In JavaScript, detecting arrow key presses is essential for creating interactive web applications like games, navigation systems, and custom input controls. Arrow keys have specific key codes that JavaScript can detect through keyboard events.
The four arrow keys have the following key codes:
- Left arrow: 37
- Up arrow: 38
- Right arrow: 39
- Down arrow: 40
Method 1: Using keyCode with onkeydown
The traditional approach uses the keyCode property to identify which arrow key was pressed:
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h1>JavaScript Arrow Key Detection</h1>
<p>Click on the page and press any arrow key</p>
<div id="output">Press an arrow key...</div>
<script>
document.onkeydown = function(event) {
const output = document.getElementById('output');
switch (event.keyCode) {
case 37:
output.innerHTML = 'Left arrow pressed';
break;
case 38:
output.innerHTML = 'Up arrow pressed';
break;
case 39:
output.innerHTML = 'Right arrow pressed';
break;
case 40:
output.innerHTML = 'Down arrow pressed';
break;
}
};
</script>
</body>
</html>
Method 2: Using Modern event.key Property
The modern approach uses the event.key property, which provides more readable key names:
<!DOCTYPE html>
<html>
<body>
<h1>Modern Arrow Key Detection</h1>
<p>Click here and press arrow keys</p>
<div id="display">Waiting for arrow key...</div>
<script>
document.addEventListener("keydown", function(event) {
const display = document.getElementById('display');
switch(event.key) {
case "ArrowLeft":
display.innerHTML = "Left arrow pressed";
break;
case "ArrowUp":
display.innerHTML = "Up arrow pressed";
break;
case "ArrowRight":
display.innerHTML = "Right arrow pressed";
break;
case "ArrowDown":
display.innerHTML = "Down arrow pressed";
break;
}
});
</script>
</body>
</html>
Method 3: Using Function Handlers
For more complex applications, you can use separate handler functions for better organization:
<!DOCTYPE html>
<html>
<body>
<h1>Arrow Key Handler Functions</h1>
<textarea placeholder="Click here and use arrow keys"></textarea>
<div id="result">No arrow key pressed yet</div>
<script>
const element = document.querySelector("textarea");
const result = document.getElementById('result');
const ArrowRight = () => result.innerHTML = "Right arrow pressed";
const ArrowLeft = () => result.innerHTML = "Left arrow pressed";
const ArrowUp = () => result.innerHTML = "Up arrow pressed";
const ArrowDown = () => result.innerHTML = "Down arrow pressed";
const handlers = {
ArrowRight,
ArrowLeft,
ArrowUp,
ArrowDown
};
element.addEventListener("keydown", e => {
if (handlers[e.key]) {
handlers[e.key]();
}
});
</script>
</body>
</html>
Comparison
| Method | Browser Support | Readability | Recommended |
|---|---|---|---|
| keyCode | All browsers | Low (numeric codes) | Legacy only |
| event.key | Modern browsers | High (descriptive names) | Yes |
| Handler functions | Modern browsers | High | For complex apps |
Key Points
- Use
event.keyfor modern applications instead of deprecatedkeyCode - Arrow key names are "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"
- Focus the element or document to receive keyboard events
- Consider using
keydownfor immediate response orkeyupfor action on release
Conclusion
Detecting arrow key presses in JavaScript is straightforward using keyboard events. The modern event.key approach with "ArrowLeft", "ArrowUp", "ArrowRight", and "ArrowDown" values is preferred over legacy key codes for better code readability and maintainability.
20K+ Views
