JavaScript onkeydown vs onkeypress vs onkeyup Event

February 8, 2021 10:45 am IST

You are Here:

JavaScript onkeydown vs onkeypress vs onkeyup Event

The onkeydown event occurs when the user presses a keyboard key.

The onkeypress event occurs when the user presses a key on the keyboard, which means this event occurs between onkeydown and onkeyup events.

The onkeyup event occurs when the user releases a key that was previously pressed (on the keyboard).

The order of execution as follows

onkeydown
onkeypress
onkeyup

Warning: The onkeypress event is deprecated and is no longer recommended, use the onkeydown event instead.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <input type="text"> <script> var x = document.getElementsByTagName("input")[0]; function myKeyDown(){ console.log("keydown is executed"); } function myKeyPress(){ console.log("keypress is executed"); } function myKeyUp(){ console.log("keyup is executed"); } x.addEventListener("keydown", myKeyDown); x.addEventListener("keypress", myKeyPress); x.addEventListener("keyup", myKeyUp); </script> </body> </html>

Run