EVENTS - keyup()

The keyup() Event gets executed, when a key (Any key in the keyboard) is released after it is pressed.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    		
    	Type Something : <input type = "text"> 		

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('input').keyup( function() { 
            	$(this).css("background-color", "red")
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you look at the above code, we have an <input> element, that accepts a text.

<input type = "text">

Now, if we take a look at the JQuery statement,

$('input').keyup( function() {
	$(this).css("background-color", "red")
});

At first we locate the <input> element,

$('input')

Then we use the keyup() event,

$('input').keyup(...)

And put the function inside keyup() event to change the color of <input> element.

$('input').keyup( function() {
	$(this).css("background-color", "red")
});

And the function,

function() {
	$(this).css("background-color", "red")
});

Locates the current element (i.e. <input>) using this and changes the color of the <input> element.

Note : In simple words, the moment we start typing something using the keyboard, and the key is released 'keyup()' event is executed.

❮❮ PREV NEXT ❯❯