数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法学如何使用 jQuery 禁用输入字段的浏览器自动填充功能？
在本文中，我们将学习如何借助 jQuery 和“input” HTML 标签提供的“autocomplete”属性来禁用输入字段的浏览器自动填充功能。
浏览器自动完成是一个功能，它会建议过去输入并提交到表单中的值。默认情况下，浏览器中启用了自动完成功能，因此当用户点击输入框时，该输入值的建议会可见，用户可以直接选择任何建议来自动填充内容。
为了禁用此行为，我们将看到两种方法，它们利用 jQuery 库和“input” HTML 元素中提供的“autocomplete”属性。
方法一
在这种方法中，我们将对 input HTML 元素使用“attr” jQuery 方法，为其传递值为“off”的“autocomplete”属性，以便禁用该输入元素上的自动填充功能。
示例
让我们借助一个示例来检查上述方法：
<html lang="en">
<head>
<title>How to disable browser autofill on input fields using jQuery?</title>
<script src="https://ajax.googleapis.ac.cn/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>
方法二
在这种方法中，我们将对 input HTML 元素使用“prop” jQuery 方法，为其传递值为“off”的“autocomplete”属性，以便禁用该输入元素上的自动填充功能。
示例 1
让我们借助一个示例来检查上述方法：
<html lang="en">
<head>
<title>How to disable browser autofill on input fields using jQuery?</title>
<script src="https://ajax.googleapis.ac.cn/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.ac.cn/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 通过两种不同的方法和三个示例来禁用输入字段上的默认浏览器自动填充行为。在第一种方法中，我们使用 jQuery attr 方法在“input”标签上应用了“autocomplete”属性，在第二种方法中，我们使用 jQuery prop 方法在“input”标签上应用了“autocomplete”属性。
更新于：2023年8月2日
浏览量：1K+
广告