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 to handle the occurring event without attaching the delegates. This method gets called once one key is a released from the keyword after being pressed. In case the key is not released event will not be called. This method works irrespective of the key being pressed, unlike the onkeyup event that occurs when letters or numbers key was pressed.
Syntax of JavaScript onkeyup
In JavaScript if one needs an event in ones 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 syntax.
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 is raised in JavaScript by the application, a code is provided to the compiler to indicate that a key is pressed. For example, a lowercase “x” will be reported as 65 bykeyup. An uppercase “A” is reported as 65 by all events. Once the compiler, gets the code it sends the control to the function defined and run all the statements in the function on each key pressed. Thus this type of method is used to perform operations such as investigating if the key pressed is an alphabet or number or if converting the letters entered to uppercase once they are typed in the field.
For raising such event 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. Many event handlers can be added to a single object. Thus using addEventListener() method makes it easier to handle various events occurrence 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 difference between keypress and keyup as onkeypress handles the situation when a key is pressed on the keyboard whereas onkeyup sees when a key is released on the keyboard. Also onkeypress sees for the keys having letters or digits where as onkeyup handles for 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 to append 1 to the each letter being pressed in the input field. Here we are using onkeyup method to call the event handler by calling myMethod and execute 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 see JavaScript code to append 1 to the 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 execute 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:
Conclusion
JavaScript onkeyup event method gets called once a key on the keyboard is released in one of the derived classes without using the delegates. We can call the event using the onkeyup method call on the object or using the addEventListener() method. This helps to call the function and perform some operations whenever a key is released from the keyboard.