Onkeyup events in javascript

onkeyup Event

The onkeyup event occurs when the user releases a key (on the keyboard).

Tip: The order of events related to the onkeyup event:

Browser Support

Syntax

In JavaScript, using the addEventListener() method:

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.

Technical Details

Bubbles:	Yes
Cancelable:	Yes
Event type:	KeyboardEvent
Supported HTML tags:	All HTML elements, EXCEPT: , , , , , , , , , , and
DOM Version:	Level 2 Events

More Examples

Example

Using «onkeydown» together with the «onkeyup» event:

Example

Output the actual key that was released inside a text field:

COLOR PICKER

HOW TO

SHARE

CERTIFICATES

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

Источник

onkeyup Event

The onkeyup event occurs when the user releases a key on the keyboard.

Keyboard Events

See Also:

Warning

The onkeypress event is deprecated.

It is not fired for all keys (like ALT, CTRL, SHIFT, ESC) in all browsers.

To detect if the user presses a key, always use the onkeydown event. It works for all keys.

Syntax

In JavaScript, using the addEventListener() method:

Technical Details

Bubbles:	Yes
Cancelable:	Yes
Event type:	KeyboardEvent
HTML tags:	All HTML elements, EXCEPT: , , , , , , , , , , and
DOM Version:	Level 2 Events

More Examples

Example

Using «onkeydown» together with the «onkeyup» event:

Example

Output the actual key that was released inside a text field:

Browser Support

onkeyup is a DOM Level 2 (2001) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

What is onkeyup in JavaScript with Example code

One of the important aspect of web development is handling user input, especially keyboard events.

The “onkeyup” event in JavaScript plays an important role in assimilating and processing keyboard input from users.

In this article, you will learn on how to use onkeyup in JavaScript and its practical implementation through different examples.

By the end of this article, you will have a wide understanding of how to use the “onkeyup” event effectively to increase user interactions on your websites.

What does onkeyup in JavaScript means?

The “onkeyup” event is a keyboard event in JavaScript that appears when a user releases a key on their keyboard.

It enable developers to take this action and execute specific code in response to the key release.

By using the “onkeyup” event, you can create constant and responsive web applications that react to user input in real-time.

How to use onkeyup in JavaScript?

To use the “onkeyup” event in JavaScript, you need to link it to an HTML element.

This element can be an input field, text area, or even the whole document if you want to take keyboard input globally.

The event is triggered when the user freeing any key while focused on the appropriated element.

Here’s the syntax to connect the “onkeyup” event to an element:

In this example, when the user releases a key while typing in the input field, the function btnValue() will be executed.

Examples of onkeyup in JavaScript

Example of Counting Characters

Let’s start with a simple example that counts the number of characters entered into an input field and displays it to the user.

Enter your message: 
Character count: 

In this example, we have an input field with an “onkeyup” event attached to it.

The countCharacters() function is called every time the user releases a key.

It calculates the number of characters in the input field’s value and updates the character count on the page in real-time.

Example of Searching for Data

Another practical application of the “onkeyup” event is creating a live search feature.

In this example, we will apply a search bar that fetches data from an API as the user types.

In this example, the “onkeyup” event triggers the liveSearch() function every time the user releases a key in the search input.

The function takes the user’s input, sends it to an API, receives the search results, and displays them as a list.

FAQs

Apart from “onkeyup”, JavaScript provides other keyboard events like “onkeydown”, “onkeypress”, and “oninput” each serving a different purpose in handling user input.

Yes, you can attach the “onkeyup” event to different HTML elements, including buttons and divs. Just remember that the element must be able to receive focus for the event to trigger.

Yes, the “onkeyup” event is widely supported across modern browsers, making it a reliable choice for handling keyboard input.

Conclusion

In conclusion, the “onkeyup” event in JavaScript is a valuable tool for handling keyboard input and creating dynamic user experiences.

By providing this event to HTML elements, you can capture user input in real-time and execute proper actions accordingly.

We have explored different examples that demonstrate how the “onkeyup” event can be practically implemented to increase web applications.

Additional Resources

Источник

JavaScript onkeyup

JavaScript onkeyup event is a type of event that occurs when the user handling the application releases one key on the keyboard. Using this method allows one to handle the events in the derived classes. Method for this event helps the application handle the occurring event without attaching the delegates. Unlike the onkeyup event, this method works regardless of the specific key being pressed, whether it is a letter, number, or any other key.

Web development, programming languages, Software testing & others

Syntax of JavaScript onkeyup

In JavaScript, if one needs an event in one’s application, there are 2 ways for that; one is by calling onkeyup method on the object and calling the method that contains the operations needed to be performed. And second is using an addEventListener method to call the function to perform the operations. Thus for calling onkeyup event method, there are 2 syntaxes.

1. Calling the function on the objects using onkeyup keyword.

document.getElementById("text_box").onkeyup = function() ;

2. Using the function in addEventListener() method on the object.

element.addEventListener(event, function, useCapture);

document.getElementById("text_box").addEventListener("keyup", myFunction);

How onkeyup Event work in JavaScript?

When the keyup event in JavaScript is triggered, the application sends a code to the compiler indicating that a key was pressed. For example, the keyup event reports a lowercase “x” as 65, yet an uppercase “A” is constantly reported as 65 throughout all events. Once the compiler gets the code, it sends the control to the function defined and runs all the statements in the function on each key pressed. This method is typically used to do actions such as determining whether the pushed key is an alphabet or a number, or transforming the entered letters to uppercase after they are typed into the field.

For raising such an event in one case, use onkeyup method on the elements and use it to call the method that needs to be called.

There is a second way to call a method on an event. It is using event Listener. In JavaScript, one can use addEvenetListener() method to call a method when an event occurs. This method helps to attach event listener to an object without overwriting existing event listeners. Thus using addEventListener() method makes it easier to handle various events occurring in the application. This also enhances the readability of the code.

element.addEventListener(event, function, useCapture);

In such a way method attaches the function to an event keyup or keypress etc.

There is a distinction between the onkeypress and onkeyup events. Also, onkeypress sees the keys having letters or digits, whereas onkeyup handles all the keys on the keyboard.

Examples of JavaScript onkeyup

Given below are the examples mentioned:

Example #1

In our first example, we will see JavaScript code append 1 to each letter being pressed in the input field. Here we are using onkeyup method to call the event handler by calling myMethod and executing the statements in the method.

  
This method will append 1 at the end of each key pressed in the text field
 Enter your Text:  document.getElementById("Number").onkeyup = function() ; function myMethod() 

Example #2

In our second example, we will demonstrate JavaScript code that appends “1” to each letter being pressed in the input field. Here we are using addEventListener() method to attach the event handler onkeyup event by calling myMethod and executing the statements in the method. Using this method enhances the readability of the code.

   
This example demonstrated use of addEventListener() method to attach a "keyup" event to an input field.
 
This method will append 1 at the end of each key pressed in the text field.
 Enter your Number:    

Recommended Articles

We hope that this EDUCBA information on “JavaScript onkeyup” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

89+ Hours of HD Videos
13 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

97+ Hours of HD Videos
15 Courses
12 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

JAVASCRIPT Course Bundle - 83 Courses in 1 | 18 Mock Tests
343+ Hours of HD Videos
83 Courses
18 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник