onKeyPress onKeyUp and onKeyDown Events in JavaScript - GeeksforGeeks

23 Sep, 2020
In JavaScript, 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 upon 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.
The below example shows different events that get triggered when a key is pressed in their respective order.
Example:
HTML
<!DOCTYPE html><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>  </html>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Design a web page using HTML and CSS
How to set space between the flexbox ?
How to Upload Image into Database and Display it using PHP ?
Create a Responsive Navbar using ReactJS
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?