HTML DOM KeyboardEvent code Property

The keyboardEvent code property in HTML represents a physical key on the keyboard. It is used to return the key that triggers the event.

Syntax:

event.code

Return Value: It returns a string that represents which key is pressed.

Example 1: With KeyDown Event

HTML

<html>

<head>

    <title>DOM keyboardEvent code Property</title>

</head>

<body style="text-align: center;">

    <h1 style="color:green;">

        GeeksforGeeks

  </h1>

    <h2>

        DOM keyboardEvent code Property

    </h2>

    Input:

    <input type="text" placeholder="Press any key..">

    <p id="p"></p>

    <script>

        // Adding a event listener function

        window.addEventListener("keydown", function (event) {

            let code = "keydown code = '" +

                event.code + "'" + "<br/>";
 
            // Creating a span element

            let element = document.createElement("span");

            element.innerHTML = code;
 
            // Appending the created element to paragraph

            document.getElementById("p").appendChild(element);

        }, true);

    </script>

</body>

</html>

Output:

Example 2: With KeyPress Event

HTML

<html>

<head>

    <title>DOM keyboardEvent code Property</title>

</head>

<body style="text-align: center;">

    <h1 style="color:green;">

        GeeksforGeeks

    </h1>

    <h2>

        DOM keyboardEvent code Property

    </h2>

    Input:

    <input type="text" placeholder="Press any key..">

    <p id="p"></p>

    <script>

        // Adding a event listener function

        window.addEventListener("keypress", function (event) {

            let code = "keypress code = '" +

                event.code + "'" + "<br/>";
 
            // Creating a span element

            let element = document.createElement("span");

            element.innerHTML = code;
 
            // Appending the created element to paragraph

            document.getElementById("p").appendChild(element);

        }, true);

    </script>

</body>

</html>

Output:

Example 3: With KeyUp Event

HTML

<html>

<head>

    <title>DOM keyboardEvent code Property</title>

</head>

<body style="text-align: center;">

    <h1 style="color:green;">

        GeeksforGeeks

    </h1>

    <h2>

        DOM keyboardEvent code Property

    </h2>

    Input:

    <input type="text" placeholder="Press any key..">

    <p id="p"></p>

    <script>

        // Adding a event listener function

        window.addEventListener("keyup", function (event) {

            let code = "keyup code = '" +

                event.code + "'" + "<br/>";
 
            // Creating a span element

            let element = document.createElement("span");

            element.innerHTML = code;
 
            // Appending the created element to paragraph

            document.getElementById("p").appendChild(element);

        }, true);

    </script>

</body>

</html>