Event jQuery Api Keyup() By Example

Jquery keyup() event – how to use keyup event with html elements. We are going to show you with simple example how to use keyup event.

jQuery keyup()

The keyup() event occurs when a keyboard button/key is released. This keyup () method triggers the keyup event, or attach a function to run when a keyup event occurs.

Syntax

$(selector).keyup() 

This triggers the keydown event for the selected elements.

$(selector).keyup(function)  

jQuery keyup() Parameters

ParameterDescription
FunctionIt is an optional parameter. It is executed itself when the keypress event is triggered.

Examples of jQuery keyup()

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 this above example , you will press a key on keyboard and release it. When you have released a key this jquery keyup event trigger and show alert on your dasktop screen.

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *