提问人:Mr Fett 提问时间:9/12/2012 最后编辑:TylerHMr Fett 更新时间:6/7/2023 访问量:672715
Chrome 忽略 autocomplete=“off”
Chrome ignores autocomplete="off"
问:
我创建了一个使用标签框下拉列表的 Web 应用程序。这在除 Chrome 浏览器(版本 21.0.1180.89)之外的所有浏览器中都运行良好。
尽管字段和字段都具有属性,但 Chrome 仍坚持显示该字段以前条目的下拉历史记录,这会删除标签框列表。input
form
autocomplete="off"
答:
对于任何寻求解决方案的人,我终于弄清楚了。
Chrome 只服从页面是 HTML5 页面(我使用的是 XHTML)。autocomplete="off"
我将我的页面转换为HTML5,问题消失了(facepalm)。
评论
Chrome 现在似乎会忽略,除非它在标签上。autocomplete="off"
<form autocomplete="off">
评论
autocomplete="new-password"
更新
现在 Chrome 似乎忽略了 or 属性。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>
评论
display: none;
将消失元素,与自动完成无关。
Chrome 版本 34 现在忽略了 ,请参阅此。autocomplete=off
关于这是好事还是坏事的讨论很多?你怎么看?
评论
在 chrome v. 34 之后,在标签处设置不起作用autocomplete="off"
<form>
我进行了更改以避免这种烦人的行为:
- 删除密码输入的 和
name
id
- 在输入中放置一个类(例如:
passwordInput
)
(到目前为止,Chrome不会将保存的密码放在输入中,但表单现在已损坏)
最后,要使表单正常工作,请在用户单击提交按钮时运行此代码,或者在您想要触发表单提交时运行此代码:
var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");
就我而言,我曾经输入过密码,所以我在触发提交之前将它们放回原处。id="password" name="password"
看到 chrome 忽略了 ,我用一种愚蠢的方式解决了它,即使用“假输入”来欺骗 chrome 来填充它而不是填充“真实”的。autocomplete="off"
例:
<input type="text" name="username" style="display:none" value="fake input" />
<input type="text" name="username" value="real input"/>
Chrome 将填写“虚假输入”,提交时,服务器将采用“真实输入”值。
TL的;DR:告诉 Chrome,这是一个新密码输入,它不会提供旧密码作为自动完成建议:
<input type="password" name="password" autocomplete="new-password">
autocomplete="off"
由于设计决策而不起作用 - 大量研究表明,如果用户可以将密码存储在浏览器或密码管理器中,则密码的破解时间更长,更难破解。
规范已更改,现在支持各种值,以使登录表单易于自动完成:autocomplete
<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">
<!-- current-password will populate for the matched username input -->
<input type="password" autocomplete="current-password" />
如果您不提供这些,Chrome 仍然会尝试猜测,当它这样做时,它会忽略 .autocomplete="off"
解决方案是密码重置表单也存在值:autocomplete
<label>Enter your old password:
<input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
<input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
<input type="password" autocomplete="new-password" name="pass-repeat" />
</label>
您可以使用此标志告诉 Chrome 不要猜测密码,即使它为此网站存储了密码。autocomplete="new-password"
Chrome 还可以直接使用凭据 API 管理网站的密码,这是一种标准,最终可能会得到普遍支持。
评论
浏览器不关心 autocomplete=off auto,甚至不关心将凭据填充到错误的文本字段?
我通过将密码字段设置为只读并在用户单击该字段或使用该字段的 Tab 键时激活它来修复它。
修复浏览器自动填充:只读并在焦点上设置可写(在鼠标单击和按 Tab 键浏览字段时)
<input type="password" readonly
onfocus="$(this).removeAttr('readonly');"/>
更新: Mobile Safari 在字段中设置光标,但不显示虚拟键盘。新修复工作与以前一样,但处理虚拟键盘:
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
// fix for mobile safari to show virtual keyboard
this.blur(); this.focus(); }" />
现场演示 https://jsfiddle.net/danielsuess/n0scguv6/
更新结束
顺便说一句,关于我的观察的更多信息:
有时我会在 Chrome 和 Safari 上注意到这种奇怪的行为,当有相同形式的密码字段时。我猜,浏览器会寻找一个密码字段来插入您保存的凭据。然后它会自动将用户名填充到最近的 textlike-input 字段中,该字段出现在 DOM 中的密码字段之前(只是由于观察而猜测)。由于浏览器是最后一个实例,您无法控制它,有时甚至 autocomplete=off 也无法阻止将凭据填写到错误的字段中,但不能阻止用户或昵称字段。
评论
目前的解决方案是使用 .Google 不会对具有某种搜索类型的输入应用自动填充功能。type="search"
请参见:https://twitter.com/Paul_Kinlan/status/596613148985171968
2016年4月4日更新:看起来这是固定的!查看 http://codereview.chromium.org/1473733008
评论
2021 更新:
将 <input type=“text”> 更改为 <input type=“search” autocomplete=“off” >
仅此而已。保留以下答案以备怀旧之情。
为了获得可靠的解决方法,可以将以下代码添加到布局页:
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete"
name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>
只有当表单中至少有一个其他输入元素具有任何其他自动完成值时,Chrome 才会考虑 autocomplete=off。
这不适用于密码字段 - 这些字段在 Chrome 中的处理方式非常不同。有关详细信息,请参阅 https://code.google.com/p/chromium/issues/detail?id=468153。
更新:Chromium 团队于 2016 年 3 月 11 日关闭了错误,因为“无法修复”。请参阅我最初提交的错误报告中的最后一条评论,以获取完整解释。TL的;DR:使用语义自动填充属性(例如 autocomplete=“new-street-address”)来避免 Chrome 执行自动填充。
评论
autocomplete="off"
type="search"
现代方法
只需输入,并在焦点上将其删除。这是一种非常简单的方法,浏览器不会填充输入。因此,此方法被接受,并且永远不会被未来的浏览器更新覆盖。readonly
readonly
<input type="text" onfocus="this.removeAttribute('readonly');" readonly />
下一部分是可选的。相应地设置输入的样式,使其看起来不像输入。readonly
input[readonly] {
cursor: text;
background-color: #fff;
}
评论
modern approach
mandatory
我遇到了类似的问题,输入字段要么采用名称,要么采用电子邮件。我设置了 autocomplete=“off”,但 Chrome 仍然强制建议。原来是因为占位符文本中有“名称”和“电子邮件”这两个词。
例如
<input type="text" placeholder="name or email" autocomplete="off" />
我通过在占位符中的单词中放置一个零宽度的空格来绕过它。不再有 Chrome 自动完成功能。
<input type="text" placeholder="nam​e or emai​l" autocomplete="off" />
不要使用 autocomplete=“off”,而是使用 autocomplete=“false” ;)
发件人: https://stackoverflow.com/a/29582380/75799
将输入类型属性更改为 。type="search"
Google 不会对包含某种搜索类型的输入应用自动填充功能。
评论
好吧,聚会有点晚了,但似乎对应该和不应该如何工作存在一些误解。根据 HTML 规范,用户代理(在本例中为 Chrome)可以覆盖:autocomplete
autocomplete
https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute
用户代理可以允许用户覆盖元素的自动填充字段名称,例如将其从“关闭”更改为“打开”,以允许在页面作者反对的情况下记住和预填充值,或者始终“关闭”,从不记住值。但是,用户代理不应允许用户轻易地覆盖自动填充字段名称从“off”到“on”或其他值,因为如果始终记住所有值,则无论站点的首选项如何,都会对用户产生重大的安全隐患。
因此,就 Chrome 而言,开发人员基本上已经说过“我们将把这个问题留给用户来决定他们是否要工作。如果您不想要它,请不要在浏览器中启用它”。autocomplete
然而,对于我的喜好来说,这似乎有点过分热心,但事实就是如此。该规范还讨论了此类移动的潜在安全隐患:
“off”关键字表示控件的输入数据特别敏感(例如核武器的激活码);或者它是一个永远不会被重复使用的值(例如,银行登录的一次性密钥),因此用户每次都必须显式输入数据,而不是能够依靠 UA 为他预填充值;或者文档提供自己的自动完成机制,并且不希望用户代理提供自动完成值。
因此,在经历了与其他人一样的挫折之后,我找到了适合我的解决方案。它与答案相似。autocomplete="false"
Mozilla的一篇文章正好谈到了这个问题:
在某些情况下,即使将 autocomplete 属性设置为 off,浏览器也会继续建议自动完成值。对于开发人员来说,这种意外行为可能非常令人费解。真正强制不完成的诀窍是将随机字符串分配给属性
因此,以下代码应该有效:
autocomplete="nope"
以下各项也应如此:
autocomplete="false"
autocomplete="foo"
autocomplete="bar"
我看到的问题是浏览器代理可能足够聪明,可以学习该属性并在下次看到表单时应用它。如果它确实这样做了,那么我仍然可以看到解决该问题的唯一方法是在生成页面时动态更改属性值。autocomplete
autocomplete
值得一提的是,许多浏览器会忽略登录字段(用户名和密码)的设置。正如Mozilla文章所述:autocomplete
出于这个原因,许多现代浏览器不支持登录字段的 autocomplete=“off”。
- 如果网站为表单设置了 autocomplete=“off”,并且表单包含用户名和密码输入字段,则浏览器仍将提供记住此登录信息,如果用户同意,浏览器将在用户下次访问此页面时自动填充这些字段。
- 如果网站为用户名和密码输入字段设置了 autocomplete=“off”,则浏览器仍将提供记住此登录信息,如果用户同意,浏览器将在用户下次访问此页面时自动填充这些字段。
这是 Firefox(从版本 38 开始)、Google Chrome(从版本 34 开始)和 Internet Explorer(从版本 11 开始)中的行为。
最后,关于属性是属于元素还是元素的一些信息。规范再次给出了答案:form
input
如果省略 autocomplete 属性,则改用与元素表单所有者的 autocomplete 属性的状态相对应的默认值(“on”或“off”)。如果没有表单所有者,则使用值“on”。
因此,将其放在表单上应适用于所有输入字段。将其放在单个元素上应仅适用于该元素(即使表单上没有元素)。如果根本不设置,则默认为 。autocomplete
on
总结
要在整个窗体上禁用:autocomplete
<form autocomplete="off" ...>
或者,如果您动态需要执行此操作:
<form autocomplete="random-string" ...>
在单个元素上禁用(无论是否存在表单设置)autocomplete
<input autocomplete="off" ...>
或者,如果您动态需要执行此操作:
<input autocomplete="random-string" ...>
请记住,某些用户代理甚至可以覆盖您最努力的禁用尝试。autocomplete
评论
new-password
select
new-password
new-password
直到上周,下面的两个解决方案似乎适用于Chrome,IE和Firefox。但随着 Chrome 版本 48(仍在 49 中)的发布,它们不再起作用:
- 窗体顶部的以下内容:
<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>
password input 元素中的以下内容:
autocomplete=“关闭”
因此,为了快速解决这个问题,起初我尝试使用一个主要的技巧,即最初将密码输入元素设置为禁用,然后在文档就绪函数中使用setTimeout再次启用它。
setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);
但这似乎太疯狂了,我做了更多的搜索,并在禁用 Chrome 自动填充中找到@tibalts答案。他的答案是在密码输入中使用 autocomplete=“new-password”,这似乎适用于所有浏览器(我在这个阶段保留了上面的修复编号 1)。
以下是 Google Chrome 开发者讨论中的链接:https://code.google.com/p/chromium/issues/detail?id=370363#c7
评论
我发布此答案是为了解决这个问题。 我目前正在使用 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">
如果此选项不再有效,或者您在使用其他浏览器或版本时遇到问题,请对此答案进行评论。
批准于:
- 铬 : 49
- 火狐浏览器 : 44, 45
- 边缘 : 25
- IE浏览器 : 11
评论
在 Chrome 48+ 中,使用以下解决方案:
将假字段放在真实字段之前:
<form autocomplete="off"> <input name="fake_email" class="visually-hidden" type="text"> <input name="fake_password" class="visually-hidden" type="password"> <input autocomplete="off" name="email" type="text"> <input autocomplete="off" name="password" type="password"> </form>
隐藏假字段:
.visually-hidden { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; }
你做到了!
这也适用于旧版本。
评论
autocomplete="off"
form
form
防止用户名(或电子邮件)和密码的自动完成:
<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">
阻止自动完成字段(可能不起作用):
<input type="text" name="field" autocomplete="nope">
解释:
autocomplete
尽管有 ,但仍然适用于 ,但您可以更改为随机字符串,例如 。<input>
autocomplete="off"
off
nope
其他用于禁用字段自动完成的“解决方案”(这不是正确的方法,但它有效):
1.
HTML格式:
<input type="password" id="some_id" autocomplete="new-password">
JS(加载):
(function() {
var some_id = document.getElementById('some_id');
some_id.type = 'text';
some_id.removeAttribute('autocomplete');
})();
或使用 jQuery:
$(document).ready(function() {
var some_id = $('#some_id');
some_id.prop('type', 'text');
some_id.removeAttr('autocomplete');
});
2.
HTML格式:
<form id="form"></form>
JS(加载):
(function() {
var input = document.createElement('INPUT');
input.type = 'text';
document.getElementById('form').appendChild(input);
})();
或使用 jQuery:
$(document).ready(function() {
$('<input>', {
type: 'text'
}).appendTo($('#form'));
});
要使用 jQuery 添加多个字段,请执行以下操作:
function addField(label) {
var div = $('<div>');
var input = $('<input>', {
type: 'text'
});
if(label) {
var label = $('<label>', {
text: label
});
label.append(input);
div.append(label);
} else {
div.append(input);
}
div.appendTo($('#form'));
}
$(document).ready(function() {
addField();
addField('Field 1: ');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>
工作于:
铬:49+
火狐浏览器:44+
评论
autocomplete="nope"
你可以使用autocomplete="new-password"
<input type="email" name="email">
<input type="password" name="password" autocomplete="new-password">
工作于:
- 铬:53、54、55
- 火狐浏览器:48、49、50
评论
autocomplete=off
在现代浏览器中在很大程度上被忽略了 - 主要是由于密码管理器等。
您可以尝试添加此功能,并非所有浏览器都完全支持它,但它适用于某些浏览器autocomplete="new-password"
始终有效的解决方案
我已经通过使用随机字符解决了与 Google Chrome 的无休止的斗争。当您总是使用随机字符串呈现自动完成时,它永远不会记住任何内容。
<input name="name" type="text" autocomplete="rutjfkde">
希望它能对其他人有所帮助。
2022 年更新:
Chrome 进行了此改进:这将解决它,但我不确定 Chrome 是否在一段时间后再次将其更改为不同的功能。autocomplete="new-password"
评论
不知道为什么这在我的情况下有效,但是在我使用的 chrome 上,Chrome 停止为我的文本字段建议地址。autocomplete="none"
评论
Autocomplete="Off"
不再起作用了。
例如,尝试只使用随机字符串而不是"Off"
Autocomplete="NoAutocomplete"
我希望它有所帮助。
autocomplete="off"
通常有效,但并非总是如此。这取决于输入字段。“address”、“email”、“name”等名称将自动完成(浏览器认为它们可以帮助用户),而“code”、“pin”等字段将不会自动完成(如果已设置)name
autocomplete="off"
我的问题是 - 自动完成弄乱了谷歌地址助手
我通过重命名它来修复它
从
<input type="text" name="address" autocomplete="off">
自
<input type="text" name="the_address" autocomplete="off">
在 chrome 71 中测试。
评论
写一个 2020+ 的答案,以防万一这对任何人有帮助。我尝试了上面的许多组合,尽管在我的情况下遗漏了一个键。即使我保留了 autocomplete=“nope” 一个随机字符串,它对我不起作用,因为我缺少 name 属性!
所以我保留了 name='password' 和自动完成 = “新密码”
对于用户名,我保留了 name=“usrid” // 不要保留包含“user”的字符串
and autocomplete = “new-password” // 也一样,所以谷歌停止建议密码(管理密码下拉列表)
这对我来说效果很好。 (我为 Cordova/ionic 使用的 Android 和 iOS Web 视图做了这个)
<ion-input [type]="passwordType" name="password" class="input-form-placeholder" formControlName="model_password"
autocomplete="new-password" [clearInput]="showClearInputIconForPassword">
</ion-input>
评论
一些结束 2020 年更新。我尝试了来自不同站点的所有旧解决方案。他们都没有奏效!:-(
然后我发现这个:
使用
<input type="search"/>
自动完成功能消失了!
Chrome 86、FireFox、Edge 87 取得成功。
评论
[适用于 2021 年 Chrome(v88、89、90)、Firefox、Brave、Safari]
这里已经写过的旧答案将通过反复试验来工作,但大多数 他们没有链接到任何官方文档或 Chrome 对此的看法 事。
问题中提到的问题是由于 Chrome 的自动填充功能,以下是 Chrome 在此错误链接中对此的立场 - https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164
简单来说,有两种情况——
[案例 1]:您的类型不是 .在这种情况下,解决方案很简单,有三个步骤。
input
password
- 将属性添加到
name
input
name
不应以电子邮件或用户名等值开头,否则 Chrome 最终仍会显示下拉列表。例如,显示下拉列表,但不显示。这同样适用于属性。name="emailToDelete"
name="to-delete-email"
autocomplete
- 添加属性,并添加一个对你有意义的值,比如
autocomplete
new-field-name
它看起来像这样,你一辈子都不会再看到这个输入的自动填充了——
<input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
- 将属性添加到
[案例2]:是
input
type
password
- 好吧,在这种情况下,无论您的试用情况如何,Chrome都会向您显示管理密码/使用现有密码的下拉列表。Firefox也会做类似的事情,所有其他主要浏览器也是如此。[1]
- 在这种情况下,如果你真的想阻止用户看到管理密码的下拉列表/看到安全生成的密码,你将不得不使用JS来切换输入类型,如本问题的其他答案中所述。
[1] 关于关闭自动补全的详细 MDN 文档 - https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
评论
<input name="portal_user" type="text" maxlength="64" autocomplete="portal">
快速破解,如果您即使阅读了上面的答案仍然获得自动完成,您可以尝试一下。提供随机字符串将删除自动完成。
<input autocomplete="somerandomstring" or autocomplete="disabled">
Idk 是否正确,它只是对我有用。
2022年8月更新:
我设法通过包括
autocomplete="new-password"
在每个单独的输入元素上,无论类型如何。
例如
<input id="email" type="email" autocomplete="new-password"/>
评论