HTML | DOM KeyboardEvent
Last Updated :
08 Nov, 2022
It refers to the events which occur when a key is pressed on the keyboard.
Syntax:
<input type=”text” onkeypress/onkeydown/onkeyup=”function()/event”>
Events:The following events occur on pressing a key-
- onkeydown
- onkeypress
- onkeyup
Properties:
- altKey: It returns if alt key was pressed or not.
- charCode: It returns unicode character of the key.
- code: It returns the code of the entered key.
- ctrlKey: It returns if ctrl key was pressed or not.
- getModifierState(): It returns true if the specified key is activated.
- isComposing: It returns whether the event is composing or not.
- key: It returns the key value.
- keyCode: It returns unicode character of the onkeypress or onkey down event.
- location: It returns the location of the key on the keyboard.
- metaKey: It returns if meta key was pressed or not.
- repeat: It returns if a key is repeatedly holding on.
- shiftKey: It returns if shift key was pressed or not.
- which: It returns the unicode character of event type.
Return Value: It returns events which occur when a given key is pressed from the keyboard.
Example-1: Showing onkeypress event.
html
<!DOCTYPE html>
< html >
< body >
< h1 >
< center >Geeks for Geeks </ center >
</ h1 >
< p >Type something in the box:</ p >
< input type="text" onkeypress="key()">
< script >
function key() {
alert("New Key Inserted");
}
</ script >
</ body >
</ html >
|
Output:
Before Pressing a key:
After Pressing a key:
Example-2: Showing onkeydown event.
html
<!DOCTYPE html>
< html >
< body >
< h1 >
< center >Geeks for Geeks </ center >
</ h1 >
< p >Type something in the box:</ p >
< input type="text" onkeydown="key()">
< script >
function key() {
alert("New Key Inserted");
}
</ script >
</ body >
</ html >
|
Output:
Before Pressing a key:
After Pressing a key:
Example-3: To check if the pressed key is Alt or not.
html
<!DOCTYPE html>
< html >
< body >
< h1 >
< center >Geeks for Geeks </ center >
</ h1 >
< p >Type something in the box to
check if Alt key is pressed or not:</ p >
< input type="text" onkeydown="isKeyPressed(event)">
< p id="gfg"></ p >
< script >
function isKeyPressed(event) {
var x = document.getElementById("gfg");
if (event.altKey) {
x.innerHTML = "ALT Key Pressed";
} else {
x.innerHTML = "ALT Key Not Pressed";
}
}
</ script >
</ body >
</ html >
|
Output:
Before Pressing a key:
After Pressing a key:
Example-4: To find out the pressed key from the keyboard.
html
<!DOCTYPE html>
< html >
< body >
< h1 >
< center >Geeks for Geeks </ center >
</ h1 >
< p >Type something in the box
to know the entered key:</ p >
< input type="text"
size="40"
onkeydown="myFunction(event)">
< p id="gfg"></ p >
< script >
function myFunction(event) {
var x = event.key;
document.getElementById(
"gfg").innerHTML =
"Entered Key is: " + x;
}
</ script >
</ body >
</ html >
|
Output:
Before Pressing a key:
After Pressing a key:
Browser Support: The listed browsers support DOM Keyboard Event-
- Google Chrome 1
- Mozilla Firefox 1.5
- Internet Explorer 9
- Edge 12
- Safari 1.2
- Opera 12.1
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...