JavaScript Detecting the pressed arrow key
Last Updated :
06 Mar, 2024
Sometimes we need to detect the keys and sometimes even detect which keys were pressed. To detect which arrow key is pressed we can use JavaScript onkeydown event.
Detecting the pressed arrow key using onkeydown Event
The DOM onkeydown Event in HTML occurs when a key is pressed by the user.
Syntax:
object.addEventListener("keydown", myScript);
Example 1: This example detects the arrow key by onkeydown Event by using event.keyCode.Â
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP" style="font-size: 16px;">
Press an arrow key and click the
button to know which key was pressed
last time.
</p>
<button onclick="gfg_Run()">
Detect Arrow key
</button>
<p id="GFG_DOWN" style="color:green;
font-size: 20px;
font-weight: bold;">
</p>
<script>
let el_up = document.getElementById("GFG_UP");
let el_down = document.getElementById("GFG_DOWN");
let str = 'No key pressed';
function gfg_Run() {
el_down.innerHTML = str;
}
document.onkeydown = function (e) {
switch (e.keyCode) {
case 37:
str = 'Left Key pressed!';
break;
case 38:
str = 'Up Key pressed!';
break;
case 39:
str = 'Right Key pressed!';
break;
case 40:
str = 'Down Key pressed!';
break;
}
};
</script>
</body>
</html>
|
Output:
JavaScript Detecting the pressed arrow key
Example 2: This example detects the arrow key by adding a eventListener(keydown) to the body by using event.key.Â
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP" style="font-size: 16px;">
Press an arrow key and click the
button to know which key was pressed
last time.
</p>
<button onclick="gfg_Run()">
Detect Arrow key
</button>
<p id="GFG_DOWN" style="color:green;
font-size: 20px;
font-weight: bold;">
</p>
<script>
let el_up = document.getElementById("GFG_UP");
let el_down = document.getElementById("GFG_DOWN");
let str = 'No key pressed';
function gfg_Run() {
el_down.innerHTML = str;
}
document.body.addEventListener('keydown', function (event) {
const key = event.key;
switch (key) {
case "ArrowLeft":
str = 'Left';
break;
case "ArrowRight":
str = 'Right';
break;
case "ArrowUp":
str = 'Up';
break;
case "ArrowDown":
str = 'Down';
break;
}
});
</script>
</body>
</html>
|
Output:
JavaScript Detecting the pressed arrow key
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...