jQuery blur() 事件方法

jQuery 事件blur() 方法用于在选定的元素上触发 blur 事件，或者绑定（或附加）一个在 blur 事件发生时运行的函数。此方法通常与<input> 和<textarea> 字段一起使用，以便在用户点击它们外部时失去焦点。

语法

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

$(selector).blur(function)

参数

此方法接受一个可选参数“function”，如下所述：

function (可选) - 当 blur 事件发生在选定的元素上时要运行的函数。

返回值

此方法不返回值，但会在选定的元素上触发 blur 事件。

示例 1

以下程序演示了 jQuery 事件blur() 方法的使用：

<html>
    <head>
        <script type = "text/javascript" src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
    </head>
<body>
    <input type="text" placeholder="Your name">
    <p>Enter something in input field and click outside the input field to lose the focus.</p>
    <script>
        $('input').blur(function(){
            alert("Input contents: " + $(this).val());
        });
    </script>
</body>
</html>

输出

程序执行后，将显示一个输入字段。当用户在此字段中输入一些内容，然后点击其外部时，该字段将失去焦点（触发 blur 事件）：

点击“确定”按钮后，您将看到输入字段失去了焦点：

示例 2

以下是 jQuery 事件blur() 方法的另一个示例。在这里，我们使用此方法绑定一个将在 blur 事件发生（触发）在选定的元素上时运行（执行）的函数：

<html>
    <head>
        <script type = "text/javascript" src = "https://tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
    </head>
<body>
    <p>Enter something in textarea field and click outside the field to lose the focus.</p>
    <p>Write your feedback</p>
    <textarea name="" id="" cols="30" rows="10" placeholder="feedback...."></textarea>
    <span></span>
    <script>
        $('textarea').blur(function add(){
            document.querySelector('span').innerHTML = $(this).val();
        });
    </script>
</body>
</html>

输出

执行上述程序后，将显示一个文本区域字段。当用户输入文本，然后点击字段外部时，将触发 blur 事件，并且该字段将失去焦点：

jquery_ref_events.htm

打印页面