jQuery Keyup() Event Method Example

Some jQuery Event Methods..png

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

ParameterDescription
FunctionIt 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> 

Leave a Reply

Your email address will not be published.