Introduction to 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.
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.
Object.onkeyup = function(){myFunction()};Example:
document.getElementById("text_box").onkeyup = function() {myFunction()};2. Using the function in addEventListener() method on the object.
element.addEventListener(event, function, useCapture);Example:
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.
Object.onkeyup =function(){function_name}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.
Syntax:
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.
Code:
<!DOCTYPE html>
<html>
<body>
<p>This method will append 1 at the end of each key pressed in the text field </p>
Enter your Text: <input type="text" id="Number">
<script>
document.getElementById("Number").onkeyup = function() {myMethod()};
function myMethod() {
var number = document.getElementById("Number");
number.value = number.value+1;
}
</script>
</body>
</html>Output:
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.
Code:
<!DOCTYPE html>
<html>
<body>
<p>This example demonstrated use of addEventListener() method to attach a "keyup" event to an input field.</p>
<p>This method will append 1 at the end of each key pressed in the text field.</p>
Enter your Number: <input type="text" id="Number">
<script>
document.getElementById("Number").addEventListener("keyup", myMethod);
function myMethod() {
var number = document.getElementById("Number");
number.value = number.value+1;
</script>
</body>
</html>Output:
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.
