jQuery focusout() example

jQuery focusout() function is used to bind an event handler to the "focusout" JavaScript event.

Syntax

$(selector).focusout( handler )
handler -A function to execute each time the event is triggered.
$(selector).focusout( [eventData ], handler )
eventData - An object containing data that will be passed to the event handler. handler - A function to execute each time the event is triggered.

Example

Watch for a loss of focus to occur inside paragraphs and note the difference between the focusout count and the blur count. (The blur count does not change because those events do not bubble.)
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>focusout demo</title>
    <style>
        .inputs {
            float: left;
            margin-right: 1em;
        }

        .inputs p {
            margin-top: 0;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <div class="inputs">
        <p>
            <input type="text"><br>
            <input type="text">
        </p>
        <p>
            <input type="password">
        </p>
    </div>
    <div id="focus-count">focusout fire</div>
    <div id="blur-count">blur fire</div>

    <script>
        var focus = 0,
            blur = 0;
        $("p")
            .focusout(function() {
                focus++;
                $("#focus-count").text("focusout fired: " + focus + "x");
            })
            .blur(function() {
                blur++;
                $("#blur-count").text("blur fired: " + blur + "x");
            });
    </script>

</body>

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

References

Comments