jQuery 事件 focusout() 方法

jQuery 事件 focusout() 方法用于将事件处理程序绑定到 focusout 事件，或在选定的元素上触发该事件。当元素或元素内部的任何元素失去焦点时，就会发生此事件。

此方法主要用于验证目的，在用户离开表单字段时触发。

语法

以下是 jQuery 事件 focusout() 方法的语法：

$(selector).focusout(function)

参数

此方法接受一个可选的参数作为函数，如下所述：

function − 当 focusout 事件发生时要执行的可选函数。

返回值

此方法不返回值，而是将事件处理程序绑定到 focusout 事件。

示例 1

当 div 元素失去焦点时更改其背景颜色：

<!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>

输出

上述程序显示一个包含输入字段的 div 框，当用户单击输入并离开 div 元素时，div 元素的背景颜色变为绿色：

当用户从 div 元素失去焦点时：

示例 2

验证表单字段失去焦点时的值。

以下示例演示了 jQuery 事件 focusout() 方法的用法。我们使用此方法来验证用户输入某些内容并失去焦点时的表单字段：

<!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>

输出

执行程序后，将显示一个带有两个输入字段和一个按钮的表单。如果输入值的长度小于 5，则输入字段的背景颜色将变为“红色”；否则，将变为“绿色”：

如果输入的值不满足给定的条件：

如果输入的值满足给定的条件：

示例 3

在不使用可选 function 的情况下使用 focusout() 方法。

在下面的示例中，我们使用带有输入字段的 focusout() 方法，以便在程序执行后将其显示为未获得焦点的输入字段：

<!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>

输出

执行上述程序后，将显示一个未获得焦点的输入字段：

jquery_ref_events.htm

打印页面