Javascript- Onkeyup Event Handler


The Onkeyup event handler in Javascript is an event handler that is triggred when a user lets go of a key on the keyboard, releasing the key.

Only after the corresponding key is released does this event handler get triggered.

So the onkeyup event handler can be used when a webmaster wants to trigger an event after a user clicks on a form and enters a character. Only after the character is entered does this event handler get triggered.

It is similar to the onkeydown event handler except that it is triggered on the release of a key held down, not on the actual press, but the release. The onkeydown event handler occurs when a user presses a key down.

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

If one of these elements has an onkeyup event handler and a key is pressed on a keyboard and then released, the event handler will be triggered and will do whatever it is programmed to do.

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

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

Enter Your Name:

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


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

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

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

Note: The onkeyup event handler cannot be used with HTML elements where you cannot enter a character into, such as <div></div> tags or <body></body> tags. It must be an element where a character of a keyboard can be entered into such as a text box 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- 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...