我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
当前回答
我发布这个答案是为了给这个问题带来一个更新的解决方案。 我目前使用的是Chrome 49,没有给出的答案。 我也在寻找一个解决方案与其他浏览器和以前的版本。
把这些代码放在表单的开头
<div style="display: none;">
<input type="text" autocomplete="new-password">
<input type="password" autocomplete="new-password">
</div>
然后,对于您的真实密码字段,使用
<input type="password" name="password" autocomplete="new-password">
如果这不再工作,或如果您遇到其他浏览器或版本的问题,请注释此答案。
批准:
Chrome浏览器:49 Firefox: 44,45 边缘:25 Internet Explorer: 11
其他回答
好吧,有点晚了,但似乎有一点关于自动补全应该和不应该工作的误解。根据HTML规范,用户代理(在这种情况下Chrome)可以覆盖自动完成:
https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute
A user agent may allow the user to override an element's autofill field name, e.g. to change it from "off" to "on" to allow values to be remembered and prefilled despite the page author's objections, or to always "off", never remembering values. However, user agents should not allow users to trivially override the autofill field name from "off" to "on" or other values, as there are significant security implications for the user if all values are always remembered, regardless of the site's preferences.
所以在Chrome的例子中,开发者基本上说“我们将把这个留给用户来决定他们是否想要自动完成工作。”如果你不想要它,就不要在浏览器中启用它”。
然而,在我看来,这对他们来说似乎有点过于热情了,但事实就是如此。规范还讨论了这样做的潜在安全影响:
The "off" keyword indicates either that the control's input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the UA to prefill the value for him; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values.
所以,在经历了和其他人一样的挫折之后,我找到了一个适合我的解决方案。它类似于autocomplete="false"答案。
Mozilla的一篇文章正是针对这个问题:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
在某些情况下,即使autocomplete属性被设置为关闭,浏览器也会继续建议自动补全值。这种出乎意料的行为可能会让开发人员感到困惑。真正强制不完成的技巧是为属性分配一个随机字符串
所以下面的代码应该可以工作:
autocomplete="nope"
以下每一项也应如此:
autocomplete="false"
autocomplete="foo"
autocomplete="bar"
我看到的问题是浏览器代理可能足够聪明,可以学习自动完成属性,并在下次看到表单时应用它。如果它确实这样做了,我所能看到的解决问题的唯一方法是在生成页面时动态更改自动完成属性值。
值得一提的一点是,许多浏览器会忽略登录字段(用户名和密码)的自动完成设置。正如Mozilla文章所述:
For this reason, many modern browsers do not support autocomplete="off" for login fields. If a site sets autocomplete="off" for a form, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page. If a site sets autocomplete="off" for username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page. This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).
最后是关于属性是属于form元素还是input元素的一些信息。规范再次给出了答案:
如果省略autocomplete属性,则使用与元素表单所有者的autocomplete属性状态对应的默认值(“on”或“off”)。如果没有表单所有者,则使用值“on”。
所以。把它放在表单上应该适用于所有输入字段。将它放在单个元素上应该只应用于该元素(即使表单上没有)。如果完全没有设置autocomplete,则默认为on。
总结
禁用整个表单的自动完成功能:
<form autocomplete="off" ...>
或者如果你动态地需要这样做:
<form autocomplete="random-string" ...>
禁用单个元素的自动补全功能(无论是否存在表单设置)
<input autocomplete="off" ...>
或者如果你动态地需要这样做:
<input autocomplete="random-string" ...>
请记住,某些用户代理甚至可以覆盖您禁用自动补全的最艰难的尝试。
Autocomplete ="off"现在工作了,所以你可以做以下事情:
<input id="firstName2" name="firstName2" autocomplete="off">
在当前的Chrome 70以及从Chrome 62开始的所有版本中测试。
演示:
顶部输入具有自动完成工作 底部输入通过添加autocomplete="off"来禁用自动完成
我刚刚尝试了下面的方法,它似乎在Chrome 53上起了作用——当输入密码字段时,它还禁用了“使用密码用于:”下拉菜单。
简单地设置你的密码输入类型为文本,然后添加onfocus处理程序(内联或通过jQuery/vanilla JS)来设置类型为密码:
onfocus="this.setAttribute('type','password')"
或者更好:
onfocus="if(this.getAttribute('type')==='text') this.setAttribute('type','password')"
截至Chrome 42,这个线程中的解决方案/hacks(截至2015-05-21T12:50:23+00:00)都不能禁用单个字段或整个表单的自动完成。
编辑:我发现你实际上只需要在其他字段之前插入一个虚假的电子邮件字段到你的表单(你可以用display: none隐藏它),以防止自动完成。我假设chrome存储某种形式的签名与每个自动完成字段,包括另一个电子邮件字段破坏这个签名,防止自动完成。
<form action="/login" method="post">
<input type="email" name="fake_email" style="display:none" aria-hidden="true">
<input type="email" name="email">
<input type="password" name="password">
<input type="submit">
</form>
好消息是,因为“表单签名”被破坏了,所以没有一个字段是自动完成的,所以在提交之前不需要JS来清除假字段。
旧的回答:
我发现唯一可行的方法是在真正的字段之前插入两个电子邮件和密码类型的虚拟字段。你可以将它们设置为display: none来隐藏它们(忽略这些字段是不够聪明的):
<form action="/login" method="post">
<input type="email" name="fake_email" style="display:none" aria-hidden="true">
<input type="password" name="fake_password" style="display:none" aria-hidden="true">
<input type="email" name="email">
<input type="password" name="password">
<input type="submit">
</form>
不幸的是,字段必须在表单中(否则两组输入都是自动填充的)。因此,为了真正忽略假字段,你需要在form submit上运行一些JS来清除它们:
form.addEventListener('submit', function() {
form.elements['fake_email'].value = '';
form.elements['fake_password'].value = '';
});
从上面可以注意到,用Javascript清除值可以覆盖自动完成。因此,如果失去适当的行为与JS禁用是可以接受的,你可以简化这一切与JS自动完成“polyfill”Chrome:
(function(document) {
function polyfillAutocomplete(nodes) {
for(var i = 0, length = nodes.length; i < length; i++) {
if(nodes[i].getAttribute('autocomplete') === 'off') {
nodes[i].value = '';
}
}
}
setTimeout(function() {
polyfillAutocomplete(document.getElementsByTagName('input'));
polyfillAutocomplete(document.getElementsByTagName('textarea'));
}, 1);
})(window.document);
看起来这是固定的!参见https://codereview.chromium.org/1473733008