HTML DOM KeyboardEvent code Property

Last Updated : 13 Jun, 2023

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>