极客教程如何用jQuery防止一个文本字段失去焦点
在这篇文章中，我们将学习如何使用jQuery来防止一个文本字段或一个输入失去焦点。这可以用在需要用户验证的情况下。有两种方法可以采取。
方法1：我们将使用jQuery的bind(), val(), preventDefault()和focus()方法。bind()方法是用来附加一个 “focusout“事件到文本字段元素。然后创建一个辅助函数isValidString()，帮助我们验证用户在文本框中的输入。如果字符串是 “geeks“，该函数返回true，否则返回false。使用val()方法提取文本字段的值，并将其作为isValidString()函数的参数。如果该函数返回false，那么我们使用preventDefault()来防止 “focusout“事件的默认动作，这意味着文本字段将不会失去焦点。只要文本框中的输入是 “geek”，控制流就会进入 “if“语句之外，”focusout“事件的默认操作就会恢复，这意味着文本框可以失去焦点。
例子：这里，如果文本框中的输入不是 “geeks“，即使我们在文本框外点击，文本框也不会失去焦点。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
p {
font-size: 20px;
font-weight: bold;
}
input {
margin-top: 0.75rem;
}
/* To make input on focus
look more distinct */
input:focus {
outline: none !important;
border: 3px solid green;
box-shadow: 0 0 10px green;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<p>How to prevent a textfield from
losing focus using jQuery</p>
<p>
Here, the textfield will only lose focus
when the word "geeks" is entered
</p>
<input type="text" class="geeks" />
<script type="text/javascript">
(function () {
(".geeks").bind("focusout", function (e) {
if (!isValidString((this).val())) {
e.preventDefault();
(this).focus();
}
});
});
// Function to check whether the
// string is "geeks" or not
function isValidString(s) {
return s === "geeks";
}
</script>
</body>
</html>
输出:
方法2：我们将使用jQuery的bind(), val(), preventDefault() 和 focus() 方法。这种方法与之前的方法类似，但不同的是，附加到文本框元素的事件是 “blur“，而不是 “focusout“。”blur“事件与 “focusout“事件类似，但关键的区别是 “blur“事件不冒泡。因此，如果需要了解一个元素或其子元素是否失去焦点，应该使用” focusout “事件。
示例:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
p {
font-size: 20px;
font-weight: bold;
}
input {
margin-top: 0.75rem;
}
/* To make input on focus
look more distinct */
input:focus {
outline: none !important;
border: 3px solid green;
box-shadow: 0 0 10px green;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<p>How to prevent a textfield from
losing focus using jQuery</p>
<p>
Here, the textfield will only lose
focus when the word "geeks" is entered
</p>
<input type="text" class="geeks" />
<script type="text/javascript">
(function () {
(".geeks").bind("blur", function (e) {
if (!isValidString((this).val())) {
e.preventDefault();
(this).focus();
}
});
});
// Function to check whether the
// string is "geeks" or not
function isValidString(s) {
return s === "geeks";
}
</script>
</body>
</html>
输出:
