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 >
|
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
Share your thoughts in the comments
Please Login to comment...