onKeyPress onKeyUp and onKeyDown Events in JavaScript

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.