数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在网页表单字段/输入标签上禁用浏览器自动填充功能？
在本文中，我们将学习如何在网页表单字段或其输入元素上禁用浏览器自动填充功能，并且我们将使用“form”和“input”HTML标签提供的“autocomplete”属性。
浏览器自动填充是一个功能，它会建议用户过去在表单中输入和提交的值。默认情况下，浏览器中启用了自动填充，因此当用户点击输入框时，该输入值的建议会可见，用户可以直接选择任何建议来自动填充内容。
为了禁用此行为，我们将看到两种利用“form”和“input”HTML元素中提供的“autocomplete”属性的方法。
方法 1
在这种方法中，我们将直接在“form”HTML标签上使用“autocomplete”属性来禁用浏览器在“form”标签内所有“input”元素上的自动填充行为。
示例
让我们通过一个示例来检查上述方法 -
<html lang="en">
<head>
<title>How to disable browser Autocomplete on web form field/input tag?</title>
</head>
<body>
<h3>How to disable browser Autocomplete on web form field/input tag?</h3>
<h4>Form with autocomplete ON</h4>
<form>
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" />
<br />
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" />
<br />
<input type="submit" value="Submit" />
</form>
<h4>Form with autocomplete OFF</h4>
<form autocomplete="off">
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" />
<br />
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
方法 2
在这种方法中，我们将直接在“input”HTML标签上使用“autocomplete”属性来禁用浏览器仅在该特定“input”元素上的自动填充行为。
示例
让我们通过一个示例来检查上述方法 -
<html lang="en">
<head>
<title>How to disable browser Autocomplete on web form field/input tag?</title>
</head>
<body>
<h3>How to disable browser Autocomplete on web form field/input tag?</h3>
<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" />
</form>
</body>
</html>
示例 3
在此示例中，我们使用两种方法来禁用自动填充行为，通过使用 javascript 将“autocomplete”设置为 false，并通过将表单的 autocomplete 属性设置为 off 来禁用表单自动填充。
文件名：index.html
<html lang="en">
<head>
<title>How to disable browser Autocomplete on web form field/input tag?</title>
<script>
// Method 1: Setting autocomplete to false using JavaScript
function disableAutocomplete() {
document.getElementById("email").autocomplete = "off";
}
// Method 2: Disabling form autofill
function disableAutofill() {
var form = document.getElementById("myForm");
form.setAttribute("autocomplete", "off");
form.addEventListener("submit", function() {
this.removeAttribute("autocomplete");
});
}
</script>
</head>
<body>
<h3>How to disable browser Autocomplete on web form field/input tag?</h3>
<form id="myForm">
<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" />
</form>
<button onclick="disableAutocomplete()">Disable Autocomplete for Email Field</button>
<button onclick="disableAutofill()">Disable Form Autofill</button>
</body>
</html>
结论
在本文中，我们学习了如何使用两种不同的方法和三个示例来禁用网页表单字段或输入标签上的默认浏览器自动填充行为。在第一种方法中，我们在“form”标签上应用了“autocomplete”属性来禁用整个表单上的自动填充行为，在第二种方法中，我们在“input”标签上应用了“autocomplete”属性来仅禁用该特定输入元素上的行为。
更新于： 2023年8月2日
208 次查看
广告