jQuery focusin() example

jQuery focusin() function is used to bind an event handler to the "focusin" event.
The focusin event occurs when an element (or any elements inside it) gets focus.
The focusin() method attaches a function to run when a focus event occurs on the element or any elements inside it.

Syntax

$(selector).focusin(function)
function - Required. Specifies the function to run when the focusin event occurs.

Example

Watch for a focus to occur within the paragraphs on the page.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>focusin demo</title>
    <style>
        span {
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <p><input type="text"> <span>focusin fire</span></p>
    <p><input type="password"> <span>focusin fire</span></p>

    <script>
        $("p").focusin(function() {
            $(this).find("span").css("display", "inline").fadeOut(1000);
        });
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 2

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("div").focusin(function() {
                $(this).css("background-color", "#FFFFCC");
            });
            $("div").focusout(function() {
                $(this).css("background-color", "#FFFFFF");
            });
        });
    </script>
</head>

<body>

    <div style="border: 1px solid black;padding:10px;">
        First name: <input type="text"><br> Last name: <input type="text">
    </div>

    <p>Click an input field to get focus. Click outside an input field to lose focus.</p>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

References

Comments