EVENTS - focusin()

The focusin() Event gets executed, when a field (Like an text or textarea field) gets focus.

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

Let us simplify with the below example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    		
    	Type Something : <input type = "text"> 		
	  
      	<script>
      
			$('input').focusin( function() { 
            	$(this).css("background-color", "yellow")
            });
            
      	</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').focusin( function() {
	$(this).css("background-color", "yellow")
});

At first we locate the <input> element,

$('input')

Then we use the focusin() event,

$('img').focusin(...)

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

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

And the function,

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

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

Note : In simple words, when we click on the <input> element, it gets the focus.

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://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

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

Output :

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

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

Now, if you see the JQuery statement,

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

We are calling the focusin() event on the <div> element. And since the <img> element is inside the <div> element, the focusin() event gets triggered. And only the color of the <div> section gets changed.

❮❮ PREV NEXT ❯❯