数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究jQuery 失去焦点事件
jQuery 允许开发人员编写比 JavaScript 更易读的代码。我们可以使用 jQuery 将 10 行 JavaScript 代码减少到 3 到 4 行。
有时，我们需要使用 jQuery 在元素失去焦点时执行某些操作。我们可以使用 jQuery 的 focusOut() 和 blur() 方法来触发失去焦点事件。主要开发人员需要将其与输入、复选框、单选按钮等一起使用，以便在用户完成输入后向用户提供验证反馈。
通常，我们将 focusout() 和 blur() 方法与 focus() 方法一起使用，后者将焦点放在输入上。
使用 FocusOut() 方法
每当输入失去焦点时，focusOut() 方法都会执行回调函数。它是 JavaScript 中“focusout”事件的替代方法。我们可以通过引用输入元素来执行 focusOut() 方法。
语法
用户可以按照以下语法使用 focusOut() 方法在元素失去焦点时执行某些操作。
$("selector").focusOut(function () {
//Perform some action
});
在上述语法中，每当元素失去焦点时，它将执行包含 jQuery 代码的回调函数。
示例 1
我们在下面的示例中创建了文本输入并添加了“first”类。此外，我们还对输入元素进行了样式设置。在 jQuery 中，我们使用 focusOut() 方法在输入失去焦点时从输入元素中删除“first”类。此外，我们还使用 focus() 方法在用户将焦点放在输入元素上时将“first”类添加到输入元素中。
在输出中，用户可以单击输入元素以聚焦，单击外部以从元素中移除焦点并观察样式的变化。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<style>
.first {
width: 300px;
height: 50px;
font-size: 15px;
text-align: center;
margin: 30px auto;
border: 2px solid green;
color: blue;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>Using the <i> jQuery's focusOut() </i> method to trigger loose events </h2>
<input type = "text" id = "focusOut" value = "Click outside to trigger loose event" class = "first" />
<script>
// using the focusOut() method to remove the 'first' class when the focus is out of the input field
$("#focusOut").focusout(function () {
$(this).removeClass("first");
});
// using the focus() method to add the 'first' class when the focus is on the input field
$("#focusOut").focus(function () {
$(this).addClass("first");
});
</script>
</body>
</html>
示例 2
在下面的示例中，我们使用 focusOut() 方法创建了电子邮件验证器。在这里，我们创建了一个电子邮件输入字段以从用户那里获取电子邮件输入。
在 jQuery 中，我们使用 focusOut() 方法在用户单击电子邮件输入字段外部时验证电子邮件。我们使用正则表达式和 test() 方法来验证电子邮件地址。我们根据电子邮件地址的有效性以绿色或红色显示消息。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h3>Using the <i> jQuery's focusOut() </i> method to validate email when input loses the focus </h2>
<input type = "email" id = "email" value = "Enter your email" />
<div id = "message"> </div>
<script>
// validating email
$("#email").focusout(function () {
// accessing value using id
var email = $("#email").val();
//If the email is empty, show an error message; Otherwise, continue with the validation
if (email != "") {
var regex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
// validate email using test() method and regex
if (regex.test(email)) {
$("#message").html("Valid Email");
$("#message").css("color", "green");
} else {
$("#message").html("Invalid Email");
$("#message").css("color", "red");
}
} else {
$("#message").html("Enter Email");
$("#message").css("color", "red");
}
});
</script>
</body>
</html>
使用 Blur() 方法
blur() 方法类似于 focusOut() 方法。它还在用户单击输入元素外部时执行回调函数。
语法
用户可以按照以下语法使用 blur() 方法在元素失去焦点时执行函数。
$('#text').blur(function () {
// js code
});
blur() 方法将回调函数作为参数。
示例 3
我们在下面的示例的 HTML 部分创建了文本输入。在 JQuery 中，我们使用 blur() 方法在元素失去焦点时显示特定消息。此外，我们还使用 focus() 方法在元素聚焦到输入元素上时显示特定消息。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h3>Using the <i> jQuery's blur() </i> method to act when an element loses focus</h3>
<input type = "text" id = "text" placeholder = "click the input">
<br> <br>
<div id = "message"> </div>
<script>
$('#text').blur(function () {
$('#message').html('You have lost the focus.');
});
$('#text').focus(function () {
$('#message').html('You have focus on the input.');
});
</script>
</body>
</html>
示例 4
在下面的示例中，我们创建了密码强度验证器。我们在密码输入字段上添加了“input”事件。因此，每当用户更改输入值时，它都会触发回调函数。
在这里，我们根据一些因素显示密码强度。如果密码长度大于 8 且包含小写字符、大写字符和数字，则密码非常强。如果它仅包含字母字符，则密码为字符串，依此类推。
每当用户失去焦点时，我们都会选择密码强度的文本值并在网页上显示验证消息。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h3>Using the <i> jQuery's blur() </i> method to create a password validator</h3>
<input type = "password" id = "password" placeholder = "Enter your password...">
<div id = "strength"> </div>
<div id = "message"> </div>
<script>
$('#password').on('input', function () {
var password = $(this).val();
if (password.length >= 8) {
if (password.match(/[A-Z]/) && password.match(/[a-z]/) && password.match(/[0-9]/)) {
$('#strength').text('Very Strong');
} else if (password.match(/[A-Z]/) && password.match(/[a-z]/)) {
$('#strength').text('Strong');
} else if (password.match(/[A-Z]/)) {
$('#strength').text('Moderate');
} else {
$('#strength').text('Weak');
}
} else {
$('#strength').text('Weak');
}
});
$('#password').blur(function () {
var strength = $('#strength').text();
if (strength === 'Weak') {
$('#message').html('Your password is weak. Please try again.');
} else {
$('#message').html('Your password is strong.');
}
});
</script>
</body>
</html>
我们学习了如何在输入元素失去焦点时触发函数。我们使用 focusOut() 和 blur() 方法来实现我们的目标。blur() 和 focusOut() 方法之间的区别在于 blur() 是 DOM 特定的方法，而 focusOut() 是 jQuery 特定的方法。
3K+ 浏览量
