In JavaScript, the engagement with HTML elements is managed via Events. These events can arise from user actions or browser activities. An event is defined as any alteration in the state of an object resulting from either user interaction or browser behavior. HTML elements support a wide variety of events. For instance, clicking on an element, modifying input, or moving the mouse cursor are all examples of such events.
Upon the loading of the page, an event is also initiated by the web browser.
The onkeyup event in JavaScript functions similarly to other events, such as click or mouseover. This particular event is activated when a user presses a key on the keyboard and subsequently releases it (key up). Hence, it is referred to as the onkeyup event. The triggering of this event occurs right after the user lifts their finger off the key. It is not dependent on the specific key pressed and behaves uniformly across all keys. We can associate this event with particular key types by evaluating their type within an if condition block.
The onkeyup event enables users to manage events for the subclasses. Utilizing this event allows the application to effectively process the event without the need for connecting any delegates.
This event is activated immediately following the onkeypress event, allowing it to be linked with the onkeypress event to execute certain actions. If the key remains pressed, this event will not be activated. The occurrence of this event is independent of the type of key pressed. Therefore, it can be triggered by any key, whether it be an alphabetic character, a numeric digit, or a special symbol.
Syntax of JavaScript onkeyup Event
The onkeyup event in JavaScript can be utilized in two distinct manners. There are two separate syntactical approaches to implement it:
Using the onkeyup with the Object
The onkeyup event can be utilized through the JavaScript Object. Its functionality operates in the following manner:
Object.onkeyup = function(){function_name()};
In the preceding illustration, it is necessary to first establish the object, after which we can execute any operations by invoking a function.
Let's understand it with the below code:
document.getElementById(element_id).onkeyup = function() {function_name()};
To define the event listener, you can utilize the addEventListener method on the specified object. Take a look at the code below:
element.addEventListener(event,function,useCapture);
In the preceding example, we implement an event listener to initiate a designated event. There are three parameters, each with its own distinct significance. Let’s delve into an explanation of these parameters before moving on.
We have provided three parameters: event, function, and useCapture. The third parameter, useCapture, is considered optional. By default, its value is set to false.
event: This denotes the type of event, which in our scenario will be an onkeyup event.
function: This function is a user-defined operation that executes the specified action in response to each "key up" event.
useCapture: The useCapture parameter is optional, and in most cases, it is not utilized. This parameter is of the boolean data type, meaning it can hold a value of either true or false. When set to true, it signifies the occurrence of event bubbling or capturing; otherwise, its default value is false.
Consider the below example:
document.getElementById(element_id).addEventListener("keyup", function_name());
The onkeyup event does not produce a return value. Instead, it merely invokes a function defined by the user. Within this function, we have the flexibility to define any action according to our specific needs.
It does not raise any exceptions for error handling and operates correctly in all scenarios, provided that there are no syntax errors present in the function being utilized.
Let's understand it with some examples:
Examples of JavaScript onkeyup Event
The onkeyup event in JavaScript is activated when a user presses a key down and then releases it. This event allows us to execute different tasks based on our needs. To illustrate this concept, let’s consider a straightforward example where we will present an alert message to the user.
Consider the below example:
Test.html:
<!DOCTYPE html>
<html>
<head>
<title>
Javascript onkeyup example
</title>
</head>
<body>
<h3>Javascript onkeyup</h3>
<div>
<label> Input 1</label>
<input type = "text" id = "val1">
</div>
<div>
<label> Input 2</label>
<input type = "text" id = "val2">
</div>
<script>
// syntax 1
document.getElementById("val1").onkeyup = function() {syntax1()};
function syntax1()
{
alert("You are in input 1");
}
// syntax 2
document.getElementById("val2").addEventListener("keyup", syntax2);
function syntax2()
{
alert("You are in input 2");
}
</script>
</body>
</html>
Output:
On pressing the key in input1:
On pressing the key in input2:
Based on the preceding output, it is evident that we have two distinct results due to the utilization of two varying inputs to manage the keyup event.
In the preceding example, we utilized both syntax styles to illustrate their functionality. We established two distinct inputs and defined two separate functions, each accessing the elements by their respective IDs. Within both functions, we present an alert containing a particular message. In this scenario, both inputs are linked to the onkeyup event. When the user presses and subsequently releases any key, an alert message will be triggered, indicating the specific method through which it is displayed.
Summary:
The onkeyup event in JavaScript represents a category of user interaction events, which are activated when a user releases a key on their keyboard after pressing it. This is the reason it is referred to as the onkeyup event.
We can effortlessly execute various actions on an element by retrieving it through DOM methods and activating its onkeyup event handler.
A prevalent application of this event is to alter user input, such as converting lowercase letters into uppercase or the other way around. Additionally, there are numerous other situations where it is necessary to invoke the onkeyup event. We can utilize the previously outlined method for each of these scenarios.