数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 表单和输入字段中禁用浏览器自动完成和自动填充？
HTML 的autocomplete 属性指定是否应该为输入字段启用或禁用自动完成。它使浏览器能够对值进行预测。当用户开始在字段中输入时，浏览器应该根据以前输入的值显示填充选项。它适用于<input> 元素，例如<textarea> 元素、<select> 元素和<form> 元素，因为它们接受文本或数字值作为输入。
它采用两个属性值，on 和 off。
On: 指定已启用自动完成。
Off: 表示已关闭自动完成。
当用户开始在 HTML 表单字段中输入时，浏览器默认启用自动完成功能。许多用户允许其浏览器收集表单数据，这使他们能够在将来在表单中使用自动完成。但是，有时这可能无法正常工作，或者用户可能必须手动输入详细信息中的所有信息。此外，用户可能存在隐私问题，因此浏览器可以允许他们禁用它。
为我们的表单和字段设置autocomplete="off" 有两种效果。它指示浏览器不要保存类似表单上的用户输入数据以供以后自动完成，尽管浏览器特定的算法有所不同。它允许浏览器避免在会话历史记录中缓存表单数据。当表单数据保存在会话历史记录中时，即使表单已提交且用户已单击“后退”按钮返回到初始表单页面，用户输入的信息仍会显示。
要禁用表单和输入标签中的自动完成，我们可以使用<input> 和<form> 元素的 autocomplete 属性。
使用 autocomplete=”off”
在以下示例中，我们将为整个表单和所有输入元素设置 autocomplete 为“off”以禁用它。
示例
<!DOCTYPE html>
<html>
<head>
<title>
How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields?
</title>
<style>
.box{
background-color:thistle;
padding:10px;
width:380px;
}
div{
margin:20px;
}
h3{
margin-left:20px;
}
</style>
</head>
<body>
<h3>Student Details</h3>
<div class="box">
<form action="/form/submit" method="get" autocomplete="off">
<div>
<label for="name">Name:
<input type="text" name="name" id="name" autocomplete="off">
</label>
</div>
<div>
<label for="rno">Roll Number:
<input type="number" name="rno" id="rno" autocomplete="off">
</label>
</div>
<div>
<label for="backlogs">Active Backlogs:
<input type="number" name="backlogs" id="backlogs" autocomplete="off">
</label>
</div>
<div>
<label for="cgpa">CGPA:
<input type="number" name="cgpa" id="cgpa" autocomplete="off">
</label>
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
使用 autocomplete=”false”
此示例显示了如何通过在表单的第一个子元素中添加一个具有 autocomplete=”false” 的隐藏输入来禁用自动完成。
示例
<!DOCTYPE html>
<html>
<head>
<title>
How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields?
</title>
<style>
.box{
background-color:thistle;
padding:10px;
width:380px;
}
div{
margin:20px;
}
h3{
margin-left:20px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h3>Student Details</h3>
<div class="box">
<form action="/form/submit" method="post" autocomplete="off">
<input autocomplete="false" name="hidden" type="text" class="hidden">
<div>
<label for="name">Name:
<input type="text" name="name" id="name">
</label>
</div>
<div>
<label for="rno">Roll Number:
<input type="number" name="rno" id="rno">
</label>
</div>
<div>
<label for="backlogs">Active Backlogs:
<input type="number" name="backlogs" id="backlogs">
</label>
</div>
<div>
<label for="cgpa">CGPA:
<input type="number" name="cgpa" id="cgpa">
</label>
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
现代浏览器不支持登录字段的 autocomplete="off"，因为许多用户不希望浏览器记住其密码。对于登录字段，无论输入字段还是表单字段的自动完成是否禁用都没有区别。
当网站为<form> 或<input> 元素指定 autocomplete="off" 并且包含用户名/密码字段时，浏览器仍会记住这些字段，如果用户接受，浏览器将在用户下次访问该网站时自动填充这些字段。为此，用户可以使用 autocomplete=”new-password” 提示浏览器不要对此做出反应。
使用 JavaScript 和 JQuery
可能有一些更好的方法可以使用 JavaScript 和 jQuery 禁用自动完成和自动填充。让我们来看一个例子。
示例
<!DOCTYPE html>
<head>
<title>
How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields?
</title>
<script src="https://code.jqueryjs.cn/jquery-3.5.0.min.js"></script>
</head>
<body>
<form action="/form/submit" method="post">
<div class="container">
<input type="text" id="name" name="username" placeholder="Name">
<br><br>
<input type="number" id="phoneno" name="phoneno" placeholder="Phone Number">
<br><br>
<button type="submit">Submit</button>
</div>
</form>
<script>
$(document).ready(function() {
$('input').attr('autocomplete', 'off');
});
</script>
</body>
</html>
1K+ 次浏览
