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>