Open In App

HTML DOM KeyboardEvent code Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

 

 Supported Browsers: The browser supported by keyboardEvent code property are listed below:

  • Apple Safari 10.1
  • Google Chrome 48.0
  • Edge 79.0
  • Firefox 38.0
  • Opera 35.0
  • Internet Explorer Not supported


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads