JavaScript onKeyPress onKeyUp and onKeyDown Events

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.

Output:

👁 Image