jQuery Keyup() Event Method Example

June 4, 2022June 4, 2022 Rabiya 0 Comments

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 occurs when a keyboard button/key is released. This keyup () method triggers the keyup event, or attaches a function to run when a 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

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>

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>