JavaScript onKeyPress onKeyUp and onKeyDown Events Last Updated : 15 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <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 let 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> </body> </html> Output: Comment More infoAdvertise with us Next Article JavaScript Detecting the pressed arrow key N nischaldutt Follow Improve Article Tags : JavaScript JavaScript-Events Similar Reads Trigger a keypress/keydown/keyup event in JS/jQuery In this article, we are going to discuss 2 methods of logging key-presses in web technologies using vanilla JavaScript as well as Jquery. We will also discuss the events related to key-presses in JavaScript. Firstly we have to create a structure so let's make an HTML and CSS layout first. HTML and C 4 min read Trigger a keypress/keydown/keyup event in JS/jQuery In this article, we are going to discuss 2 methods of logging key-presses in web technologies using vanilla JavaScript as well as Jquery. We will also discuss the events related to key-presses in JavaScript. Firstly we have to create a structure so let's make an HTML and CSS layout first. HTML and C 4 min read JavaScript Detecting the pressed arrow key Sometimes we need to detect the keys and sometimes even detect which keys were pressed. To detect which arrow key is pressed we can use JavaScript onkeydown event. Detecting the pressed arrow key using onkeydown EventThe DOM onkeydown Event in HTML occurs when a key is pressed by the user. Syntax:ob 2 min read JavaScript Detecting the pressed arrow key Sometimes we need to detect the keys and sometimes even detect which keys were pressed. To detect which arrow key is pressed we can use JavaScript onkeydown event. Detecting the pressed arrow key using onkeydown EventThe DOM onkeydown Event in HTML occurs when a key is pressed by the user. Syntax:ob 2 min read JavaScript onmouse Events The onmouse event is used to define the operation using the mouse. JavaScript onmouse events are: onmouseover and onmouseoutonmouseup and onmousedownonmouseenter and onmouseleave JavaScript onmouseover and onmouseout: The onmouseover and onmouseout events occur when the mouse cursor is placed over s 1 min read How to Detect Keypress using JavaScript ? In this article, keyboard detection is performed using HTML and CSS. HTML stands for "Hypertext Markup Language". HTML language helps the developer to create and design web page elements like links, sections, paragraphs, headings, and blockquotes for web applications. CSS stands for "Cascading Style 2 min read Like