jQuery Event focusout() Method

The jQuery event focusout() method is used to bind an event handler to the focusout event, or to trigger that event on a selected element. It occurs when an element or any elements inside loses the focus.

This method is mostly used for validation purposes, triggering when the user moves away from the form field.

Syntax

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

$(selector).focusout(function)

Parameters

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

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

Return Value

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

Example 1

Change the background color of the div element when it loses 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 loses focus.</p>
        <label for="">Name:</label>
        <input type="text">
    </div>
    <script>
       $("div").focusout(function() {
        $(this).css({"background-color":"green", "color":"white"});
    });
    </script>
</body>
</html>

Output

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

When user loses the focus from the div element −

Example 2

Validate the form fields when it loses the focus.

The following example demonstrates the usage of the jQuery event focusout() method. We use this method to validate the form fields when a user enters someting and loses the focus −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<style>
    label, input, button{
        display: block;
        padding: 10px 5px;
    }
    input{
        width: 200px;
    }
    button{
        margin: 10px 0px;
        padding: 10px 20px;
    }
</style>
<body>
    <form>
        <h2>Login Form</h2>
        <label for="">Username: </label>
        <input type="text">
        <label for="">Password: </label>
        <input type="password">
        <button>Login</button>
    </form>
    <script>
        $('input').focusout(function(){
            let data = $(this).val();
            if(data.length < 5){
                $(this).css({"background-color": "red", "border":"1px solid red"});
            }
            else{
                $(this).css({"background-color": "green", "border":"1px solid green"});
            }
        })
    </script>
</body>
</html>

Output

After executing the program, a form with two input fields and a button will be displayed. If the length of the entered value is less than 5, the background color of the input fields will turn "red"; otherwise, it will change to "green" −

If the entered value is not satisfied (value length less than 5), the given conditions −

If the entered value satisfies the given conditions −

Example 3

Use the focusout() method without the optional function.

In the example below, we use the focusout() method with an input field to display it as an unfocused input field once the program gets executed −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>The below input field loses its focus.</p>
    <input type="text" placeholder="Name">
    <script>
        $('input').focusout();
    </script>
</body>
</html>

Output

After executing the above program, an unfocused input field will be displayed −

jquery_ref_events.htm

Print Page