Javascript- Onkeypress Event Handler


The Onkeypress event handler in Javascript is an event handler that is triggred when a user presses down a key on the keyboard and the corresponding character is typed.

It is similar to the onkeydown() event handler except that it is triggered after the corresponding character is typed in after a user presses a key. The onkeydown() event handler occurs when a user presses a key down (without the corresponding character being typed in).

The onkeypress() event handler occurs between the onkeydown() event handler and the onkeyup() event handler.

This web element can be any element where a user can enter a character into, such as a form element, such as a textbox or a text area.

If one of these elements has an onkeypress() event handler and a key is pressed press on a keyboard and entered in, the function will be triggered and will do whatever it is programmed to do.

An example of the onkeypress event handler is shown below with the text box.

Click on this text box and press press any key on the keyboard.

Enter Your Name:

Once a key is pressed and entered into the text box, an alert pop-up box will then appear telling the user to "You Pressed a Key".


The code to create the above text box which triggers the alert pop-up box is:

Enter Your Name: <input type="text" onkeypress="alert('You Pressed a Key');"/>

To create a text box that creates an alert pop-up when a key is pressed, we add an onkeypress() event handler to the text box. The onkeypress event handler triggers the alert, "You Pressed a Key".

Note: The onkeypress event handler cannot be used with HTML elements where you cannot enter a key into, such as <div></div> tags or <body></body> tags. It must be an element where a key can be entered into such as a textbox or text area.

Related Resources

Javascript- Onload Event Handler

Javascript- Onunload Event Handler

Javascript- Onfocus Event Handler

Javascript- Onblur Event Handler

Javascript- Onclick Event Handler

Javascript- Onchange Event Handler

Javascript- Onkeydown Event Handler

Javascript- Onkeyup Event Handler

Javascript- Onmouseover Event Handler

Javascript- Onmousedown Event Handler

Javascript- Onmouseup Event Handler

Javascript- Onmouseout Event Handler

Javascript- Onreset Event Handler

Javascript- Onabort Event Handler

Javascript- Oncopy Event Handler

HTML Comment Box is loading comments...