Skip to content
Related Articles

Related Articles

onKeyPress onKeyUp and onKeyDown Events in JavaScript
  • Last Updated : 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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :