What is the event when javascript loses focus?-Front-end Q&A-php.cn

What is the event when javascript loses focus?

WBOY

Release： 2022-01-17 16:14:25

Original

15828 people have browsed it

In JavaScript, the focus loss event is the blur() event. This method specifies that the blur event occurs when the element loses focus, or specifies the function to be run when the blur event occurs. The syntax is "$(selector). blur()" or "$(selector).blur(function)".

What is the event when javascript loses focus?

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What is the event that JavaScript loses focus

The blur event occurs when an element loses focus.

blur() method triggers the blur event, or specifies a function to run when the blur event occurs.

Tip: This method is often used together with the focus() method.

Syntax

Trigger the blur event for the selected element:

$(selector).blur()

Copy after login

Add a function to the blur event:

$(selector).blur(function)

Copy after login

The example is as follows:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("input").focus();
  });  
  $("#btn2").click(function(){
    $("input").blur();
  }); 
});
</script>
</head>
<body>
输入你的名字: <input type="text">
<br><br>
<button id="btn1">触发 focus 事件</button>
<button id="btn2">触发 blur 事件</button>
</body>
</html>

Copy after login

Output result:

What is the event when javascript loses focus?

The example is as follows:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","red");
  });
  $("input").blur(function(){
    $(this).css("background-color","green");
  });
});
</script>
</head>
<body>
名字: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>

Copy after login

Output result:

What is the event when javascript loses focus?

[Related recommendations: javascript learning tutorial]

The above is the detailed content of What is the event when javascript loses focus?. For more information, please follow other related articles on the PHP Chinese website!