Home > Article > Web Front-end > Detailed explanation of how to use jQuery blur() event
Overview
Triggers the blur event for each matching element.
This function will call and execute all functions bound to the blur event, including the browser's default behavior. You can prevent triggering the browser's default behavior by returning false. The blur event will be triggered when the element loses focus, either as a mouse action or by pressing the tab key to leave
Parameters
fnFunctionV1.0
In each The handler function bound in the blur event of the matched element.
[data],fnString,FunctionV1.4.3
data:blur([Data], fn) Data can be passed in for function fn to process.
fn: The handler function bound in the blur event of each matching element.
Example
Description:
Trigger the blur event of all paragraphs
jQuery Code:
$("p").blur();
Description:
When any paragraph loses focus, a "Hello World!" pops up a handler function bound to the blur event of each matching element.
jQuery code:
$("p").blur( function () { alert("Hello World!"); } );
Example
Change the color of the input field when it loses focus (blur):
$("input").blur(function(){ $("input").css("background-color","#D6D6FF"); });
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); }); }); </script> </head> <body> Enter your name: <input type="text" /> <p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p> </body> </html>
Definition and usage When The blur event occurs when an element loses focus. The blur() function triggers the blur event, or if the function parameter is set, the function can also specify the code to be executed when the blur event occurs. Tip: Earlier, the blur event only occurred on form elements. In new browsers, this event can be used on any element
触发 blur 事件触发被选元素的 blur 事件。语法$(selector).blur()<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); }); $("#btn1").click(function(){ $("input").focus(); }); $("#btn2").click(function(){ $("input").blur(); }); }); </script> </head> <body> Enter your name: <input type="text" /> <p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p> <p><button id="btn1">触发输入域的 focus 事件</button></p> <p><button id="btn2">触发输入域的 blur 事件</button></p> </body> </html>
The above is the detailed content of Detailed explanation of how to use jQuery blur() event. For more information, please follow other related articles on the PHP Chinese website!