jQuery Event focusin() Method

The jQuery event focusin() method is used to bind an event handler to the focusin event, which occurs when an element or any elements inside gains the focus.

This method supports event bubbling, it can detect the focus event on parent elements as well.

Syntax

Following is the syntax of the jQuery event focusin() method −

$(selector).focusin(function)

Parameters

This method accepts an optional parameter as a function, which is described below −

function − An optional function to execute when the focusin event occurs.

Return Value

This method does not return any value, instead, it binds an event handler to the focusin event.

Example 1

Change the background color of the "div" element when it gains the focus −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 30%;
        padding: 10px;
        border: 1px solid red;
    }
    input{
        width: 70%;
    }
</style>
</head>
<body>
    <div>
        <p>Change the bachground color, when gains the focus.</p>
        <label for="">Name:</label>
        <input type="text">
    </div>
    <script>
       $("div").focusin(function() {
        $(this).css({"background-color":"green", "color":"white"});
    });
    </script>
</body>
</html>

Output

The above program displays a div box containing an input field, when the user clicks on the input field the background color changes to blue of the div element −

When user clicks on the input field −

Example 2

Event bubbling with the focusin() method.

The jQuery event focusin() method is used for event bubbling in the following example −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<style>
    div{
        width: 200px;
        height: 100px;
        border: 2px solid black;
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
    }
</style>
<body>
    <p>Click on the input filed to perform the event bubbling.</p>
    <div id="parent">
        <input type="text" id="child">
    </div>
    <script>
        $('#parent').focusin(function(){
            alert("Focused on the parent element or one of its children!")
        });
        $("#child").focusin(function(){
            alert("Child element gained focus");
        });
    </script>
</body>
</html>

Output

After executing the program, if you focus on the child input element, both focusin() event handlers will be triggered because of event bubbling. First, the child’s handler will run, and then the parent’s, due to the event propagation in the DOM −

If the user clicks on the input field, which is a child element −

Once you click on the "OK" button, the parent handler will be executed −

Example 3

Use the focusin() method without the optional function −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <input type="text" placeholder="Name">
    <script>
        $('input').focusin().css({"background-color":"gray", "color":"white"});
    </script>
</body>
</html>

Output

After executing the program, an unfocused input field displays with a gray background −

jquery_ref_events.htm

Print Page