EN
JavaScript - detect when arrow key was pressed
6
points
In this article, we would like to show you how to detect when the arrow key was pressed using JavaScript.
The main idea of how to detect the arrow key is to check the key code when the key event occurred.
Key codes:
| Key name | Key code ( event.key, event.code) | Deprecated key code ( event.keyCode) |
|---|---|---|
| Left arrow | ArrowLeft | 37 |
| Up arrow | ArrowUp | 38 |
| Right arrow | ArrowRight | 39 |
| Down arrow | ArrowDown | 40 |
Practical example
In the below example, we use some legacy function that lets to get key code. The main reason why that approach was used, is the time when event.key and key.code were introduced in the major web browsers (around 2016-2017). To see the result, each arrows key is handled and displayed a message in the console.
Example 1:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div>Click here to get focus and press arrow keys.</div>
<script>
var MAPPING = {
37: 'ArrowLeft',
38: 'ArrowUp',
39: 'ArrowRight',
40: 'ArrowDown',
};
function getKey(event) {
return event.key || MAPPING[event.keyCode]; // with legacy support
}
document.addEventListener('keydown', function(event) {
var key = getKey(event);
switch (key) {
case 'ArrowLeft':
console.log('Arrow left pressed.');
break;
case 'ArrowUp':
console.log('Arrow up pressed.');
break;
case 'ArrowRight':
console.log('Arrow right pressed.');
break;
case 'ArrowDown':
console.log('Arrow down pressed.');
break;
}
});
</script>
</body>
</html>
Example 2:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div>Click here to get focus and press arrow keys.</div>
<script>
var MAPPING = {
37: 'ArrowLeft',
38: 'ArrowUp',
39: 'ArrowRight',
40: 'ArrowDown',
};
function getCode(event) {
return event.code || MAPPING[event.keyCode]; // with legacy support
}
document.addEventListener('keydown', function(event) {
var code = getCode(event);
switch (code) {
case 'ArrowLeft':
console.log('Arrow left pressed.');
break;
case 'ArrowUp':
console.log('Arrow up pressed.');
break;
case 'ArrowRight':
console.log('Arrow right pressed.');
break;
case 'ArrowDown':
console.log('Arrow down pressed.');
break;
}
});
</script>
</body>
</html>