keyup

About

The keyup event is a type of event that occurs when a user releases a key on their keyboard. This event is commonly used in app development to capture user input, such as when a user types into a form field or interacts with a game or other interactive application.

When a key is released, the keyup event is triggered, and the browser can capture the key code or character that was entered by the user. This information can then be used to update the user interface, perform calculations, or execute other actions in response to the user's input.

The keyup event is often used in conjunction with other keyboard events, such as keydown and keypress, to create complex interactions and workflows in applications.

Event listener

Here's an example of how to add a keyup event listener to an HTML input element:

HTML

JavaScript

Here, we select the text input element with the ID my-input using document.getElementById(), and then use addEventListener() to attach a function to the keyup event of that element.

The function that we attach will be executed when the user releases a key while the input element has focus, and in this case, it simply logs the keyup event object to the console. You can replace the console log with any other code that you want to execute when the keyup event is triggered.

Note that the function we attached to the keyup event takes an event parameter, which is an object that provides information about the event that was triggered. You can use this object to access the key code or character entered by the user, as well as other information about the event.

Property

Here is the same example using the onkeyup property:

Here, we select the text input element with the ID my-input using document.getElementById(), and then set the .onkeyup property to a function that will be executed when the user releases a key while the input element has focus.

Inline

HTML

JavaScript

Here, we add the onkeyup event attribute to the text input element with the ID my-input. The value of the onkeyup attribute is a string that specifies the name of a function to be executed when the keyup event is triggered.

We define the function handleKeyUp in JavaScript, and pass it the event parameter. This function will be executed when the keyup event is triggered on the input element, and in this case, it simply logs the keyup event object to the console.

Programmatic trigger

There is no keyup() method. Instead, you can create a keyup event using the Event constructor and dispatch it on the element using the dispatchEvent() method.

Here's an example of how to use the dispatchEvent() method

HTML

JavaScript

Here, we select the text input element with the ID my-input using document.getElementById(). We then create a new keyup event using the Event() constructor, and trigger it on the input element using the dispatchEvent() method.

When the keyup event is triggered, any event listeners that have been attached to the element using addEventListener() or the .onkeyup property will be executed.

Note that when creating a new Event object, you can pass in an optional second argument to specify additional properties for the event, such as the key code or character entered by the user. For example:

This would create a new keyup event with the key and keyCode properties set to simulate the user pressing the Enter key.

It's important to note that programmatic triggering of events using the dispatchEvent() method should generally be avoided, as it can cause unexpected behaviour and can be difficult to debug.