Updated March 20, 2023
Introduction to jQuery keyup()
jQuery keyup() method triggers a keyup event or adds an event handler by attaching a function to be executed for the keyup event when any keyboard button is released. This method is a keyboard event method, which works in order with other two keyboard event methods, key down() and keypress().
There is this particular order of events that get triggered for keyup events to occur.
- keydown(): This method can find out if a key is on its way down.
- keypress(): This method detects if the key is pressed down.
- keyup(): This method detects if the key is released.
Syntax:
To trigger the keyup event for the selected element.
(selector).keyup()To attach a handler/function to the keyup event.
$(selector).keyup(function)where,
- selector: It is the selected HTML element.
- function: It is an optional parameter that specifies a function to be executed each time.
- keyup: Event is triggered, that is, each time a key is released.
Examples of jQuery keyup() Method
Given below are the examples mentioned :
Example #1
This example is the illustration of the working of the keyup() method.
<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery keyup()</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("input:text").keyup(function() {
$("input:text").css("background-color", "coral");
});
$("input:reset").click(function() {
$("input:text").css("background-color", "yellow");
});
});
</script>
<style> div {
width: 400px; height: 300px; padding: 20px; font-size: medium; margin: auto;
font-weight: bold;
border: 3px solid cornflowerblue; background: lightgray;
margin-top: 80px; margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<h3 style="color: brown;">Example for jQuery keyup event</h3> Enter any value: <input type="text" />
<input type="reset" />
<br /><br />
Enter anything in the text box, and the background color will change on key up.
<br /><br />
</div>
</body>
</html>Output:
- The below screen gets displayed when the page is first loaded in the browser.
- At this point, the background color of the text field is white with no input provided.
- Now, as we press any key and release it, the background color of the input box changes to coral as shown in the screenshot below.
- The reason behind this color change is that the jQuery keyup() method attaches a function to the selected input box as soon as the keyup event is triggered on releasing the key.
- The keyup event occurs once a key is released, which in turn makes the keyup() method to execute the attached function.
- This function on execution changes the background color to coral.
- The reset button is clicked to try entering the value again in the text box.
- Background color changes to yellow once this button is clicked.
In the above example, we saw that as soon as the key is released, the keyup event is triggered which in turn executes the attached function that changes the background color.
Example #2
Let us now see an example illustrating the order of events keydown() and keyup().
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("input").keydown(function() {
$("input").css("background-color", "blue");
});
$("input").keyup(function() {
$("input").css("background-color", "teal");
});
});
</script>
<style> div {
width: 500px; height: 400px;
padding: 20px;
font-size: medium; margin: auto;
font-weight: bold;
border: 3px solid cornflowerblue; background: lightgray;
margin-top: 80px; margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<h2 style="color:indigo">Example for jQuery keyup event</h2> Enter anything: <input type="text" />
<p style="color:brown">
Once you press any key inside the input field, the background color will change to skyblue. As soon as you release the key, the background color changes to teal.
</p>
<p style="color:blue">
The reason behind this is when any key is pressed down, keydown event gets triggered which invokes keydown() method to execute the attached function to change the background color of the input field.
</p>
<p style="color:teal">
In a similar mannner, once the key is released, keyup event gets triggered which invokes keyup() method to execute the attached function to chnage the background color of the input field.
</p>
</div>
</body>
</html>Output:
- The below screenshot is taken when the page is first loaded in the browser.
- At this point in time, no activity has been performed.
- Once any key is pressed down inside the input field, the background color changes to blue as shown in the below screenshot. After the pressed key is released, the background color of the input field changes to teal as shown below.
Example #3
Now, consider a different example demonstrating the effect of keyup() method.
<html>
<head>
<title>Example for jQuery keyup()</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> div {
width: 800px; height: 500px; padding: 20px; font-size: medium; text-align: center; margin: auto;
font-weight: bold;
border: 3px solid cornflowerblue; margin-top: 50px;
margin-bottom: 10px;
}
</style>
</head>
<script>
var shades = [
"grey", "lightcyan", "coral", "lightpink", "yellow", "forestgreen", "khaki", "indigo"
];
var x = 0;
$(document).keyup(function(event) {
$("div").css("background-color", shades[x]); x++;
x = x % 9;
});
</script>
<body>
<br />
<br />
<div>
<p style="color:teal; font-size:x-large; font-weight: bold;"> Example for jQuery keyup event
</p>
<p style="color:maroon; font-size: large;">
Press and release any key to see the change <br /> in the background color of the page
</p>
</div>
</body>
</html>Output:
- The below screen shows when the page is initially loaded in the browser.
- No activity has been performed as of now.
- As soon as any key is pressed and released inside the shown div, the background color changes to a different color as shown below in the screenshots.
- Each time any key is pressed and released, a new color comes up in the div.
In the above example, we saw that each time the key is released, keyup event is sent to the document object which then triggers keyup() method which results in a change of the background color
Conclusion
This article demonstrated the implementation of jQuery keyup() method with a few examples. Whenever any key is pressed, jQuery keyup event fires which in turn triggers the keyup() method which then executes the attached handler. The keyup() method is a shorthand for on( “keyup”, handler ) where keyup is the event parameter. Detaching of the handler can be done using off( “keyup” ).
Recommended Articles
This is a guide to jQuery keyup(). Here we discuss the Introduction, syntax, and examples of the jQuery keyup() method. You may also have a look at the following articles to learn more –
