Home >Web Front-end >JS Tutorial >Detailed explanation of how to use jQuery blur() event

Detailed explanation of how to use jQuery blur() event

黄舟Original: 2017-06-26 14:04:533137browse

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JQuery: Sharing of alternative methods after toggle time is eliminatedNext article：JQuery: Sharing of alternative methods after toggle time is eliminated

See more

Detailed explanation of how to use jQuery blur() event

Related articles