EVENTS - blur()

The blur() Event gets executed, when a field (Like an text or textarea field) comes out of focus.

Example :

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

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

      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      		
			$('input').focus( function() { 
            	$(this).css("background-color", "yellow")
            });
      
			$('input').blur( 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, we have used the focus() event to demonstrate, how the color changes, when the element comes out of focus.

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

So, as seen in the previous example, the color of the input element changes to yellow, when it has the focus.

Then we have the JQuery statement,

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

That locates the <input> element and when it comes out of focus, the color of the <input> element changes from yellow to red.

❮❮ PREV NEXT ❯❯