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".
Code
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