Detailed explanation of how to use jQuery blur() event-JS Tutorial-php.cn

Detailed explanation of how to use jQuery blur() event

黄舟

Release： 2017-06-26 14:04:53

Original

3076 people have browsed it

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();

Copy after login

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!"); } );

Copy after login

Example

Change the color of the input field when it loses focus (blur):

$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});

Copy after login

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

Copy after login

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>

Copy after login

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!