如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
我使用此TextMode=“password”autocomplete=“new password”,并在aspx txtPassword.Attributes.Add(“value”,“”)中加载页面;
其他回答
我认为HTML5支持autocomplete=off。
问问自己为什么要这样做——在某些情况下这可能是有意义的,但不要只是为了这样做而这样做。
这对用户来说不太方便,甚至在OS X中也没有安全问题(Soren在下面提到)。如果你担心人们的密码被远程窃取,即使你的应用程序使用autcomplete=off,击键记录器仍然可以做到这一点。
作为一个选择让浏览器记住(大部分)我的信息的用户,如果你的网站不记得我的信息,我会觉得很烦人。
(它在2021适用于Chrome(v88、89、90)、Firefox、Brave和Safari。)这里已经写过的旧答案将经过反复尝试,但大多数他们没有链接到任何官方文档或Chrome对此的评论课题
问题中提到的问题是因为Chrome的自动填充功能,这是Chrome在这个bug链接中的立场-问题468153:autocomplete=off在非登录INPUT元素上被忽略,注释160
简单地说,有两种情况-
[案例1]:您的输入类型不是密码。在这种情况下,解决方案很简单,有三个步骤。将name属性添加到输入name不应以电子邮件或用户名之类的值开头。否则Chrome仍然会显示下拉列表。例如,name=“emailToDelete”显示下拉列表,但name=“to delete email”不显示。这同样适用于autocomplete属性。添加autocomplete属性,并添加一个对您有意义的值,如新字段名
它将看起来像这样,并且在您的余生中不会再次看到该输入的自动填充-
<input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
[案例2]:输入类型为密码好吧,在这种情况下,无论您的试用如何,Chrome都会向您显示管理密码/使用现有密码的下拉列表。Firefox也会做一些类似的事情,其他所有主要浏览器也是如此。2.在这种情况下,如果你真的想阻止用户看到下拉列表来管理密码/看到安全生成的密码,你就必须使用JS来切换输入类型,正如这个问题的其他答案中提到的那样。
2有关关闭自动完成的详细MDN文档-如何关闭表单自动完成
为了解决这个问题,我使用了一些CSS技巧和以下工作。
input {
text-security:disc;
-webkit-text-security:disc;
-mox-text-security:disc;
}
请阅读本文了解更多详情。
您可以在属性name how电子邮件地址中向表单添加名称,并生成电子邮件值。例如:
<form id="something-form">
<input style="display: none" name="email" value="randomgeneratevalue"></input>
<input type="password">
</form>
如果使用此方法,Google Chrome将无法插入自动填充密码。
由于自动完成的行为在不同的浏览器和版本中几乎是不可预测的,所以我的方法是不同的。指定要禁用只读属性自动填充的所有输入元素,并仅在聚焦时禁用它。
document.addEventListener('click', (e) => {
readOnlys.forEach(readOnly => {
if (e.target == readOnly) {
readOnly.removeAttribute('readonly', '');
readOnly.style.setProperty('pointer-events', 'none');
} else {
readOnly.setAttribute('readonly', '');
readOnly.style.setProperty('pointer-events', 'auto');
}
});
});
document.addEventListener('keyup', (e) => {
if (e.key == 'Tab') {
readOnlys.forEach(readOnly => {
if (e.target == readOnly) {
readOnly.removeAttribute('readonly', '');
readOnly.style.setProperty('pointer-events', 'none');
} else {
readOnly.setAttribute('readonly', '');
readOnly.style.setProperty('pointer-events', 'auto');
}
});
}
});
如果您想确保用户在禁用JS的情况下仍然可以访问字段,那么可以在页面加载时通过JS设置所有只读。您仍然可以使用autocomplete属性作为回退。
推荐文章
- 如何修复favicon.ico错误:“Failed to load resource: net::ERR_EMPTY_RESPONSE”
- 这个CSS是如何产生一个圆的?
- 我如何显示点(“…”)在一个跨度与隐藏溢出?
- 画布在使用CSS时被拉伸,但正常使用“width”/“height”属性
- 如何让一个按钮将我的页面重定向到另一个页面?
- 如何让元素被点击(对于整个文档)?
- Node.js上的html解析器
- 大写还是小写文档类型?
- 样式化HTML电子邮件的最佳实践
- CSS/HTML:什么是使文本斜体的正确方法?
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- CSS div元素-如何显示水平滚动条只?
- 检查是否选择了jQuery选项,如果没有选择默认值
- 将Dropzone.js与其他字段集成到现有的HTML表单中