JavaScript onkeyup

Syntax of JavaScript onkeyup

Javascript onekeyup event can be used in two ways or we can say there are two syntaxes present for the onekeyup event:

1. Using the onekeyup keyword for the object

In the above syntax, first, we will define an object and after that, we will call a function to perform desired actions. Let's see this with the help of an example:

2. By using the function in addEventListener() method on the object

In the above syntax, we will use the addEventListener function which will help us to add event listeners to our HTML elements. We will discuss parameters in the next section. Before that, here is an example of this syntax:

Parameters of JavaScript onkeyup

Javascript onkeyup event can be used in two ways as we have discussed in the previous section. Now let’s discuss the parameter passed in both methods.

• In the first method, only a function call is made and this function will be defined by the user itself so no parameter is passed.
• In the second method we passed three arguments (the third parameter is optional with a false default value) :
  1. event: here event is an onkeyup event
  2. function: in function user can provide or define a function to perform the desired operation on each “key up”
  3. useCapture: This is the optional parameter and normally we don’t use it. It is a boolean data type while true indicates event bubbling or even capturing and by default, it has a false data value.

Return Value of JavaScript onkeyup

Javascript onkeyup event doesn't return any value. This event may call the function which is defined by the user according to the need of the program.

Exceptions of JavaScript onkeyup

Javascript onkeyup event doesn't throw any exceptions and works fine with every case and every key unless the user has written the wrong syntax like have a spelling mistake, called a non-declared function, etc.

Example

Javascript onkeyup event comes into action when the user leaves a key after pressing it. We can perform various modifications on the keys pressed by the user, perform many other functions, or send some alert message to the user. Let’s see an example of an onkeyup event in which we will show an alert message to the user.

Output:

In the output of this code, we will get an h2 heading "Javascript onkeyup" on top and then two h3 subheadings representing "syntax1" and "syntax2", which also consist of two input blocks. If we add any element in the first block under the "syntax1" heading, an alert will pop up after releasing the keyboard key: "You are using syntax1". Similarly, for the second input box, when we try to write any character in that, it will show an alert: "You are using syntax2". For both input sections, data or processes (like backspace, etc) will be shown in the respective input box.

Explanation:

In the above code, we have used both the syntaxes and how they work. First, we created two input methods and defined two functions one each of them to give an alert if the user tries to give input and leave any key after pressing it. Both the inputs are connected with 'onekeyup' events and as the user 'ups the key' they both give an alert message which shows by which syntax we have defined the 'onekeyup' event.

How Does JavaScript onkeyup work?

We have many real-life scenarios where a user or person presses any button and when he/she releases it got an output or any response only when he/she releases it like, in movies we normally see the working of the land-mines, they only explode when any person or object accidentally press it and it does nothing until the person or object release them. When there is any change that occurs in the state of the object due to some activity of the browser or the user is known as an event. An event may occur due to the keypress or key left of the keyboard, mouse click, or any change in the window or the document. “onkeyup” event is a keyboard event that occurs when the user leaves the keyboard key which was earlier pressed by the user. “onkeyup” event works for every single key of the keyboard. When we press any computer key it sends a signal to the CPU which is the code of the pressed key and with the help of that CPU detects which key is pressed and “onkeyup” help us to perform some function either at the pressed key or at that time which we are going to see in next section using examples.

More Examples

Up to this section we have learned about the “onkeyup” event like when it occurs, what’s its syntax, etc. Let’s see its real-life practical use:

Example1: Many times when we provide the input it can be in lowercase or uppercase English letters and there may be a scenario where only uppercase input is required and we have to show the input instantly so in this case we can use the “onkeyup” event to convert any lowercase English alphabet to uppercase English alphabet.

Output:

In the output, we will get an input section where if we try to add any lowercase English alphabet it will automatically appear there as uppercase alphabet as it got changed.

Explanation:

In the above code, we have created an input section where we added an onkeyup event to change the given input. Here we have defined the script in which we are getting the input section by its id and using the onkeyup event applied toUpperCase() javascript function to change any lowercase alphabet to uppercase and show that in the input section.

Supported Browsers

javascript onkeyup event is supported in almost every famous or most commonly used browser, let’s look into some of the browsers with the minimum version required: