我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
当前回答
你可以使用autocomplete="new-password"
<input type="email" name="email">
<input type="password" name="password" autocomplete="new-password">
适用于:
Chrome: 53,54,55 火狐:48、49、50
其他回答
我设法禁用了利用这条规则的自动合成:
不是密码,但应该隐藏的字段,例如credit 卡号,也可以有type="password"属性,但应该 包含相关的自动补全属性,例如“cc-number”或 “cc-csc”。 https://www.chromium.org/developers/design-documents/create-amazing-password-forms
<input id="haxed" type="password" autocomplete="cc-number">
然而,随之而来的是巨大的责任:)
不要试图欺骗浏览器密码管理器(或内置于 浏览器,或外部)的设计是为了简化用户体验。 插入假字段,使用错误的自动补全属性或 利用现有密码管理器的弱点 只会让用户感到沮丧。
更新
现在Chrome似乎忽略了style="display: none;"或style="visibility: hidden; "属性。
你可以把它改成这样:
<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">
根据我的经验,Chrome只自动完成第一个<input type="password">和前一个<input>。所以我添加了:
<input style="display:none">
<input type="password" style="display:none">
到<form>的顶部,该情况得到解决。
截至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);
用autocomplete="false"代替autocomplete="off";)
来自:https://stackoverflow.com/a/29582380/75799
隐藏的输入元素技巧似乎仍然有效(Chrome 43),以防止自动填充,但要记住的一件事是Chrome将尝试基于占位符标记自动填充。您需要将隐藏输入元素的占位符与您试图禁用的输入的占位符匹配。
在我的情况下,我有一个字段的占位符文本“城市或Zip”,我正在使用谷歌地方自动完成。它似乎试图自动填写,就好像它是一个地址表单的一部分。直到我在隐藏元素上放置了与实际输入相同的占位符,这个技巧才起作用:
<input style="display:none;" type="text" placeholder="City or Zip" />
<input autocomplete="off" type="text" placeholder="City or Zip" />