Jquery keyup() event method; In this tutorial, you will learn how to use the jQuery keyup event method with HTML elements.
jQuery Keyup() Event Method
The keyup() event takes place when a keyboard key is released. This keyup() method triggers the keyup event or attaches a function to execute when the keyup event occurs.
Syntax of jQuery Keyup() Event Method
$(selector).keyup()
This triggers the keydown event for the selected elements.
$(selector).keyup(function)
Parameters of jQuery Keyup() Event Method
| Parameter | Description |
|---|---|
| Function | It is an optional parameter. It is executed itself when the keypress event is triggered. |
Examples of jQuery Keyup() Event Method
Let’s see an example1 of jQuery keyup() .
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "green");
});
$("input").keyup(function(){
$("input").css("background-color", "pink");
});
});
</script>
</head>
<body>
Fill the Input Box: <input type="text">
</body>
</html>
Fill the Input Box:
Let’s see an example 2 of jQuery keyup() .
<html>
<head>
<title>Jquery Keyup() Event </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<b>
<h1>Press and release a key from the keyboard </h1>
</b>
</body>
<script>
$(document).keyup(function(event) {
alert('You have released a key');
});
</script>
</html>
In the above example, you will press a key on the keyboard and release it. When you have released a key this jquery keyup event trigger and show alert on your dasktop screen.
Recommended jQuery Tutorials
Recommended:-jQuery | Event MouseUp By Example
Recommended:-Event jQuery Mouseleave By Example
Recommended:-jQuery Event Mouseenter Example
Recommended:-Event jQuery MouseOver & MouseOut By Example
Recommended:-Event jQuery. Blur By Example
Recommended:-jQuery – Remove All Unwanted Whitespace From String
Recommended:-jQuery form submit event with example
Recommended:-keydown function jQuery
Recommended:-List of jQuery Events Handling Methods with examples
Thanks, very useful article. very easy to understand.