EVENTS - focusout()

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

The focusout() Event also gets executed, when the child element of any element loses focus.

Example :

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

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

      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('input').focusout( 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').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 becomes red.

Now, let us take another example, where the <input> element is under a <div> element.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<div>	
    		Type Something and click outside  : <input type = "text">
    	</div>	 		
	  
      	<script>
      
			$('div').focusout( function() { 
            	$(this).css("background-color", "red")
            });
            
      	</script>      
  	</body>
</html>

Output :

In this case, we have the <input> element inside a <div> element.

<div>
	Type Something and click outside  : <input type = "text">
</div>

Now, if you see the JQuery statement,

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

We are calling the focusout() event on the <div> element. And since the <img> element is inside the <div> element, the focusout() event gets triggered, when we bring the cursor out of the <input> element. And only the color of the <div> section gets changed.

❮❮ PREV NEXT ❯❯