Whenever a key is pressed or released, there are certain events that are triggered. Each of these events has a different meaning and can be used for implementing certain functionalities depending on the current state and the key that is being used.
These events that are triggered when a key is pressed are in the following order:
- keydown Event: This event occurs when the user has pressed down the key. It will occur even if the key pressed does not produce a character value.
- keypress Event: This event occurs when the user presses a key that produces a character value. These include keys such as the alphabetic, numeric, and punctuation keys. Modifier keys such as ‘Shift’, ‘CapsLock’, ‘Ctrl’ etc. do not produce a character, therefore they have no ‘keypress’ event attached to them.
- keyup Event: This event occurs when the user has released the key. It will occur even if the key released does not produce a character value.
Note that different browsers may have different implementations of the above events. The onKeyDown, onKeyPress, and onKeyUp events can be used to detect these events respectively.
Example: The below example shows different events that get triggered when a key is pressed in their respective order.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >Document</ title >
</ head >
< body >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< p >
< b >onKeyPress Vs. onKeyUp
and onKeyDown Events</ b >
</ p >
< input type = "text" id = "field" placeholder = "Type here" >
< p id = "status" ></ p >
< script >
// Script to test which key
// event gets triggered
// when a key is pressed
let key_pressed =
document.getElementById('field');
key_pressed
.addEventListener("keydown", onKeyDown);
key_pressed
.addEventListener("keypress", onKeyPress);
key_pressed
.addEventListener("keyup", onKeyUp);
function onKeyDown(event) {
document.getElementById("status")
.innerHTML = 'keydown: '
+ event.key + '< br >'
}
function onKeyPress(event) {
document.getElementById("status")
.innerHTML += 'keypress: '
+ event.key + '< br >'
}
function onKeyUp(event) {
document.getElementById("status")
.innerHTML += 'keyup: '
+ event.key + '< br >'
}
</ script >
</ body >
</ body >
</ html >
|
Output: