Open In App

JavaScript Detecting the pressed arrow key

Last Updated : 06 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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

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

JavaScript Detecting the pressed arrow key



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads