Javatpoint Logo
Javatpoint Logo

jQuery focusin() method

The focusin() method is used to bind a function, which executes when an element or any element in it gets focus. An element gets focus when it is selected by a tab-navigation or by mouse click. It is different from the focus() method, as the focusin() method also triggers when child elements of an element get the focus.

The focusin() method is generally used with the focusout() method.


This method accepts a single parameter, which is defined as follows -

function: It specifies a function to execute on the occurrence of the focusin event.

Now let's understand the focusin() method using an example.


In this example, we are using the focusin() method to change the style of the div element when it or any of the elements inside it gets focus. Here, there is a div element, including a textfield and a button. When the user clicks inside the textfield or the button, the focusin event triggers, and the background color of the div element will get changed.

If we use the focus() method instead of using the focusin() method, nothing will happen on clicking the elements inside the div element. This is because the focus() method does not trigger when a child element of an element gets focus.

Test it Now


After the execution of the above code, we will get the following output -

jQuery focusin() method

After clicking inside the textfield, the output will be -

jQuery focusin() method

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA