极客笔记jQuery 如何禁用浏览器自动填充输入字段
在这篇文章中，我们将学习如何使用jQuery和”input” HTML标签提供的”autocomplete”属性禁用浏览器的自动填充功能。
浏览器自动填充是一种建议过去输入和提交到表单中的值的功能。默认情况下，浏览器中启用了自动填充功能，所以当用户点击输入框时，会显示该输入值的建议，并且用户可以直接选择建议中的任意一项来自动填充内容。
为了禁用这个行为，我们将介绍两种方法，这两种方法都使用了jQuery库和”input” HTML元素中可用的”autocomplete”属性。
方法一
在这个方法中，我们将使用”attr” jQuery方法来为一个输入框HTML元素传递一个值为”off”的”autocomplete”属性，以禁用该输入框的自动填充功能。
示例
让我们通过一个示例检查上述方法：
<html lang="en">
<head>
<title>How to disable browser autofill on input fields using jQuery?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h3>How to disable browser autofill on input fields using jQuery?</h3>
<form id="form">
<label for="email">Email (With Autocomplete)</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name (Without Autocomplete)</label>
<input type="text" name="firstName" id="firstName" autocomplete="off" />
<br />
<label for="lastName">Last Name (Without Autocomplete)</label>
<input type="text" name="lastName" id="lastName" autocomplete="off" />
<br />
<input type="submit" value="Submit" />
<script>
(document).ready(function () {("#firstName").attr("autocomplete", "off");
$("#lastName").attr("autocomplete", "off");
});
</script>
</form>
</body>
</html>
方法二
在此方法中，我们将使用jQuery的“prop”方法在输入HTML元素上传递一个名为“autocomplete”的prop，并将其值设为“off”，以便禁用该输入元素上的自动填充功能。
示例1
让我们通过一个示例来验证上述方法 –
<html lang="en">
<head>
<title>How to disable browser autofill on input fields using jQuery?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h3>How to disable browser autofill on input fields using jQuery?</h3>
<form id="form">
<label for="email">Email (With Autocomplete)</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name (Without Autocomplete)</label>
<input type="text" name="firstName" id="firstName" autocomplete="off" />
<br />
<label for="lastName">Last Name (Without Autocomplete)</label>
<input type="text" name="lastName" id="lastName" autocomplete="off" />
<br />
<input type="submit" value="Submit" />
<script>
(document).ready(function () {("#firstName").prop("autocomplete", "off");
$("#lastName").prop("autocomplete", "off");
});
</script>
</form>
</body>
</html>
示例2
在此示例中，当电子邮件输入字段获得焦点时，我们通过暂时更改其 type 属性来禁用自动填充浏览器功能。
文件名：index.html
<html lang="en">
<head>
<title>How to disable browser autofill on input fields using jQuery?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h3>How to disable browser autofill on input fields using jQuery?</h3>
<form id="form">
<label for="email">Email (With Autocomplete)</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name (Without Autocomplete)</label>
<input type="text" name="firstName" id="firstName" autocomplete="off" />
<br />
<label for="lastName">Last Name (Without Autocomplete)</label>
<input type="text" name="lastName" id="lastName" autocomplete="off" />
<br />
<input type="submit" value="Submit" />
<script>
(document).ready(function () {("#firstName").prop("autocomplete", "off");
("#lastName").prop("autocomplete", "off");
});
// Additional example: Temporarily changing the type attribute("#email").focus(function () {
(this).prop("type", "text");("[type='text']").prop("autocomplete", "off");
});
("#email").blur(function () {(this).prop("type", "email");
$("[type='text']").prop("autocomplete", "on");
});
</script>
</form>
</body>
</html>
结论
在本文中，我们学习了如何使用jQuery在输入字段上禁用默认的浏览器自动填充行为，共使用了2种不同的方法和3个示例。在第一种方法中，我们使用jQuery的attr方法在“input”标签上应用了“autocomplete”属性，而在第二种方法中，我们使用了jQuery的prop方法在“input”标签上应用了“autocomplete”属性。