JavaScript onkeyup Event

In JavaScript, the interaction with the HTML elements is handled through the Events. These events can be user events or browser events. Any change in the object's state due to some browser or user interaction or activity is known as an event. There are many events that are supported by HTML elements. For example, if we click on any element, change input, or move the mouse cursor; these are events.

Even when the page is loaded, there is also an event triggered by the web browser.

Javascript onkeyup() is another event just like the other event such as click, mouseover, etc. It is triggered when the user presses any key on the keyboard and leaves the key (key up). That's why it is called the onkeyup event. This event is triggered immediately after the user releases the keyboard key. This event is independent of the key type and works similarly for all. We can bind this event with some specific key types by checking its type in the if condition block.

The onkeyup event allows the user to handle the events for the derived classes. Methods Having this event helps the application efficiently handle the event without attaching any delegates.

This event is triggered just after the onkeypress event, thus it can be bind with the onkeypress event to perform some actions. If the key is not released, this event will not be triggered. This event does not depend on the key type. So, it can be triggered using any of the keys regardless of whether it is alphabet, numeric, or any special symbol.

Syntax of JavaScript onkeyup Event

We can use the JavaScript onkeyup event in two different ways. There are two different syntaxes to use it:

Using the onkeyup with the Object

We can use the onkeyup event by using the JavaScript Object. It will work as follows:

In the above example, we need to define the object first, and then we can perform any task by calling a function.

Let's understand it with the below code:

Specifying the event listener using the addEventListener() method on the object. Consider the below code:

In the above example, we use an event listener to trigger a specified event. There are three parameters that have their specific meaning. Let's understand these parameters before proceeding further.

We have passed three arguments which are event, function, and usecapture. The third parameter useCapture, is an optional parameter. Its default value is false).

event: It specifies event type, so it will be an onkeyup event for our case.

function: The function is a custom function that can perform the desired operation on each "key up" event.

useCapture: The useCapture is an optional parameter, and normally we don't use it. It is a boolean data type that has a true or false value. If its value is true, it indicates an event bubbling or capturing, and by default, it has a false data value.

Consider the below example:

The onkeyup event does not return anything. It just calls a user-defined function. We can specify any action in this function as per our requirement.

It does not throw any exception for exception handling and works fine in every case unless there is no syntax error in the applied function.

Let's understand it with some examples:

Examples of JavaScript onkeyup Event

JavaScript onkeyup event is triggered when the user presses any key and releases it. We can perform various actions at this point depending on the requirement. Let's understand it with a simple example where we will show 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:

From the above output, we can see two different outputs as we have used two different inputs for handling the keyup event.

In the above example, we used both syntax styles to demonstrate their work. We have created two different inputs and defined two different functions where we are accessing the element by their id. In both functions, we are providing an alert with some specific message. Here, both input is connected with the onkeyup event. As the user presses any key and releases it, we will get the alert message with the specific message to display by which approach it is being displayed.

Summary:

JavaScript onkeyup event is a user interaction type of event means it will be triggered when the user presses any key on the keyboard and leaves the key (key up). That's why it is called the onkeyup event.

We can easily perform any action on an element by accessing it using the DOM methods and trigger it onkeyup event handler.

The very common use of this event is to modify the user input, for example: changing lowercase alphabet letters to uppercase or vice-versa. There may be many other scenarios where we must trigger the onkeyup event. We can follow the above-discussed approach for every case.

Next TopicJavaScript string repeat() method

← prev next →