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.
HTML
<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 var 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> |
Output:
