Chrome 忽略 autocomplete=“off”

Chrome ignores autocomplete="off"

提问人:Mr Fett 提问时间:9/12/2012 最后编辑:TylerHMr Fett 更新时间:6/7/2023 访问量:672715

问:

我创建了一个使用标签框下拉列表的 Web 应用程序。这在除 Chrome 浏览器(版本 21.0.1180.89)之外的所有浏览器中都运行良好。

尽管字段和字段都具有属性,但 Chrome 仍坚持显示该字段以前条目的下拉历史记录,这会删除标签框列表。inputformautocomplete="off"

HTML Google-Chrome 自动完成 表单

评论

17赞 user3071434 2/26/2019
从技术上讲,这个问题是在被引用为“这个问题在这里已经有答案”之前大约 5 个月被问到的。那个是重复的,因为它在这个之后。
0赞 Kim Steinhaug 7/22/2020
老实说,如果这是禁用 autocomplete=off 的原因怎么办。如果,计划是确保网络是详细和描述的,以便您现在使用的浏览器可以自动完成其最新版本可能想要的任何字段。如果是这种情况,我们需要描述所有字段 - 浏览器将优雅地禁用自动完成脚本/应用程序范围之外的所有字段的自动完成功能......我敢打赌,既然如此,
83赞 BruneX 7/22/2020
7 年了,我们仍然无法正确禁用自动完成......真是太可惜了。.
3赞 Muhammad Rosyid 2/25/2021
我在这里得到了解释 developer.mozilla.org/en-US/docs/Web/Security/......
2赞 Hamid Taebi 10/16/2021
请参阅建议使用 autocomplete=“new-password” bugs.chromium.org/p/chromium/issues/detail?id=370363#c7 链接

答:

9赞 Mr Fett 4/17/2013 #1

对于任何寻求解决方案的人,我终于弄清楚了。

Chrome 只服从页面是 HTML5 页面(我使用的是 XHTML)。autocomplete="off"

我将我的页面转换为HTML5,问题消失了(facepalm)。

评论

5赞 user1130176 11/10/2021
你能解释一下你是怎么做到的吗?
0赞 Sven Cazier 12/17/2021
@user1130176 现在是 2021 年,除非您明确表示不使用 HTML5,否则您正在使用 HTML5。这个解决方案,如果它曾经是一个,现在已经不再相关了。
173赞 ice cream 4/21/2013 #2

Chrome 现在似乎会忽略,除非它在标签上。autocomplete="off"<form autocomplete="off">

评论

0赞 zero_cool 4/1/2016
对于 React,请使用 'autoComplete=off'。
1赞 Luke 9/26/2016
有关 Chrome 进行此更改的原因的解释,请参阅以下答案: stackoverflow.com/a/39689037/1766230 -- 他们优先考虑用户而不是开发人员。
26赞 Chris 10/16/2016
如果您想向 Chrome 团队提供使用 autocomplete=“off” 的正当理由,请在此处进行:bugs.chromium.org/p/chromium/issues/detail?id=587466
3赞 AndyP9 9/30/2019
只是对上述内容进行澄清,因为存在相互矛盾的报告。在表单标记上添加 autocomplete=“off”,在单个输入标记上添加 autocomplete=“new-password”。从 Chrome 75 开始工作
5赞 Vladimir Hidalgo 4/24/2020
与 Chrome 81 一样,它现在忽略了单个字段autocomplete="new-password"
331赞 Diogo Cid 3/28/2014 #3

更新

现在 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>

评论

70赞 user881703 2/5/2015
这不再起作用了 chrome 40 不起作用 这个解决方案
14赞 Augustin Riedinger 6/8/2015
这不仅丑陋,而且我仍然找不到任何解释为什么问题??
4赞 Christoph Leiter 3/18/2016
如果显示:没有使用,Chrome 现在似乎会忽略它们,所以我用绝对定位将字段移出视图......
2赞 Sandun Perera 1/29/2019
display: none;将消失元素,与自动完成无关。
2赞 Tofandel 11/27/2020
@AugustinRiedinger为什么?因为 Chrome 滥用地强迫开发人员这样做,因为他们不尊重规范,也不希望任何人禁用他们糟糕的自动填充,永远无法正确处理字段:sigh:
27赞 Peter Kerr 4/9/2014 #4

Chrome 版本 34 现在忽略了 ,请参阅此autocomplete=off

关于这是好事还是坏事的讨论很多?你怎么看?

评论

14赞 commonpike 3/12/2019
对不起,投了反对票......这不是一个讨论网站(试试Quora),你没有提供答案。谢谢你的链接。
5赞 Renato Lochetti 4/24/2014 #5

在 chrome v. 34 之后,在标签处设置不起作用autocomplete="off"<form>

我进行了更改以避免这种烦人的行为:

  1. 删除密码输入的 和nameid
  2. 在输入中放置一个类(例如:passwordInput )

(到目前为止,Chrome不会将保存的密码放在输入中,但表单现在已损坏)

最后,要使表单正常工作,请在用户单击提交按钮时运行此代码,或者在您想要触发表单提交时运行此代码:

var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");

就我而言,我曾经输入过密码,所以我在触发提交之前将它们放回原处。id="password" name="password"

11赞 Chang 5/5/2014 #6

看到 chrome 忽略了 ,我用一种愚蠢的方式解决了它,即使用“假输入”来欺骗 chrome 来填充它而不是填充“真实”的。autocomplete="off"

例:

<input type="text" name="username" style="display:none" value="fake input" /> 
<input type="text" name="username" value="real input"/>

Chrome 将填写“虚假输入”,提交时,服务器将采用“真实输入”值。

66赞 Keith 7/22/2014 #7

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 管理网站的密码,这是一种标准,最终可能会得到普遍支持。

评论

6赞 Daniel Kotin 7/22/2014
这不是一个真正令人信服的理由。用户想要某样东西的事实并不意味着这是一个聪明的想法。这几乎与说您将允许在应用程序中使用单字符密码一样糟糕,因为用户发现它更方便。有时,安全胜过便利......
0赞 dunxz 8/4/2014
我有一个名为“ContactNoAlt”的字段,Chrome 坚持要用电子邮件地址填充。自动完成开/关是首选,但需要在实际层面上解决,因为 Chrome 是可变的。更明确地说,autocomplete=“off” 是一个标准——所以是什么让 Chrome 的开发人员如此优秀,以至于他们只是觉得他们可以忽略标准——也许有一天 Chrome 会决定其他一些 HTML 不方便......(这开始感觉像 IE5/6 de-ja-vu)
0赞 Hippyjim 3/3/2015
我是 chrome 用户,我不希望出现这种行为。它甚至没有问我,然后它自动填充了弹出的密码框,以确保只有我可以访问相关的 Web 应用程序。保存某些密码并不意味着自动完成所有密码。
6赞 squarelogic.hayden 8/13/2015
这个答案(以及谷歌的行为)忽略了这样一个事实,即你可能想要这样做的主要原因之一是实现你自己的(例如,数据库中的列表)自动完成行为。
1赞 Claudiu Creanga 2/2/2016
您正试图为 Chrome 做出的明显错误的决定辩护。我正在执行公司的政策,我无法更改。所以现在我必须插入 chrome 的 hacks。他们目前工作。如果他们停止工作,那么我们公司将更改员工的默认浏览器。所以现在我们有同样的行为,但在未来的升级中可能会有黑客攻击和可能损坏的页面。在这里看到所有这些答案,有很多开发人员使用这些技巧。干得好铬。
28赞 dsuess 11/14/2014 #8

浏览器不关心 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 也无法阻止将凭据填写到错误的字段中,但不能阻止用户或昵称字段。

评论

3赞 Hippyjim 3/3/2015
我没有使用 onfocus,而是使用 setTimeout 来清除只读,这样我的用户就不会看到输入是只读的,并且永远不会聚焦它!
0赞 cansu 11/15/2021
只有解决方案对我有用
41赞 Nathan Pitman 5/8/2015 #9

目前的解决方案是使用 .Google 不会对具有某种搜索类型的输入应用自动填充功能。type="search"

请参见:https://twitter.com/Paul_Kinlan/status/596613148985171968

2016年4月4日更新:看起来这是固定的!查看 http://codereview.chromium.org/1473733008

评论

13赞 Miguel 3/28/2019
这与 v73 不同
0赞 Joe 2/25/2022
这对我来说是最简单的事情,chrome 版本 98.0.4758.102。不过,它是否适用于其他版本的 Chrome 似乎很脆弱。
152赞 J.T. Taylor 6/17/2015 #10

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 执行自动填充。

评论

2赞 J.T. Taylor 10/15/2015
@Jonathan Cowley-Thom:试试我提供的这些包含解决方法的测试页面。在 hub.securevideo.com/Support/AutocompleteOn 上,您应该会看到 Chrome 自动完成建议。然后,在 hub.securevideo.com/Support/AutocompleteOff 上尝试相同的条目。您应该不会看到 Chrome 自动补全建议。我刚刚在 Chrome 45.0.2454.101m 和 46.0.2490.71m 上进行了测试,它在两者上都按预期工作。
0赞 J.T. Taylor 12/4/2015
关于此事的另一个更新:我刚刚收到 Chrome 团队的通知,此问题已修复。因此,希望很快不再需要这种解决方法!
0赞 J.T. Taylor 2/6/2016
请参阅我上面的帖子:“这不适用于密码字段 - 这些字段在 Chrome 中的处理方式非常不同。有关详细信息,请参阅 code.google.com/p/chromium/issues/detail?id=468153
3赞 cssyphus 3/15/2021
@J.T.Taylor 一个人也必须具有属性,否则不会奏效。谢谢!为了找到诀窍autocomplete="off"type="search"
3赞 mediaguru 6/10/2021
在 type=“tel” 等情况下,将输入类型更改为搜索是没有用的。
119赞 Fizzix 9/15/2015 #11

现代方法

只需输入,并在焦点上将其删除。这是一种非常简单的方法,浏览器不会填充输入。因此,此方法被接受,并且永远不会被未来的浏览器更新覆盖。readonlyreadonly

<input type="text" onfocus="this.removeAttribute('readonly');" readonly />

下一部分是可选的。相应地设置输入的样式,使其看起来不像输入。readonly

input[readonly] {
     cursor: text;
     background-color: #fff;
}

工作实例

评论

65赞 Fizzix 11/4/2015
@Basit - 这就是为什么我称它为 .世界上只有不到 1% 的用户关闭了 Javascript。所以老实说,当绝大多数网站都依赖 Javascript 时,不值得任何人花时间去适应这么小的受众。开发网站已经有很长一段时间了,我的网站100%使用Javascript并严重依赖它。如果用户关闭了 Javascript,那是他们自己的问题和选择,而不是我的。他们将无法访问或使用至少 90% 的在线网站,并关闭它......你的反对票是完全无关紧要的。modern approach
37赞 puchu 4/14/2016
这在今天 49 年不起作用。Chrome“开发人员”正在关注stackoverflow解决方案并将其删除。
7赞 dsuess 12/14/2016
2015 年 9 月的这个答案基本上是 2014 年 11 月的答案的副本。
3赞 abulhol 1/10/2020
这将中断 HTML 表单对 的检查。例如,使用此代码的密码字段不能在提交之前强制填写。mandatory
5赞 bfontaine 2/29/2020
请记住,在关键交互上依赖 JS 不仅会破坏停用 JS 的用户的功能:对于连接速度较慢的用户(JS 尚未加载),还会破坏该功能。
5赞 William 9/15/2015 #12

我遇到了类似的问题,输入字段要么采用名称,要么采用电子邮件。我设置了 autocomplete=“off”,但 Chrome 仍然强制建议。原来是因为占位符文本中有“名称”和“电子邮件”这两个词。

例如

<input type="text" placeholder="name or email" autocomplete="off" />

我通过在占位符中的单词中放置一个零宽度的空格来绕过它。不再有 Chrome 自动完成功能。

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />
5赞 Basit 10/17/2015 #13

不要使用 autocomplete=“off”,而是使用 autocomplete=“false” ;)

发件人: https://stackoverflow.com/a/29582380/75799

6赞 Matas Vaitkevicius 10/29/2015 #14

将输入类型属性更改为 。type="search"

Google 不会对包含某种搜索类型的输入应用自动填充功能。

评论

4赞 boly38 9/21/2017
我会投反对票:在 chrome 60 上测试:这不会阻止自动完成。.
60赞 Hooligancat 1/26/2016 #15

好吧,聚会有点晚了,但似乎对应该和不应该如何工作存在一些误解。根据 HTML 规范,用户代理(在本例中为 Chrome)可以覆盖:autocompleteautocomplete

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

用户代理可以允许用户覆盖元素的自动填充字段名称,例如将其从“关闭”更改为“打开”,以允许在页面作者反对的情况下记住和预填充值,或者始终“关闭”,从不记住值。但是,用户代理不应允许用户轻易地覆盖自动填充字段名称从“off”到“on”或其他值,因为如果始终记住所有值,则无论站点的首选项如何,都会对用户产生重大的安全隐患。

因此,就 Chrome 而言,开发人员基本上已经说过“我们将把这个问题留给用户来决定他们是否要工作。如果您不想要它,请不要在浏览器中启用它”。autocomplete

然而,对于我的喜好来说,这似乎有点过分热心,但事实就是如此。该规范还讨论了此类移动的潜在安全隐患:

“off”关键字表示控件的输入数据特别敏感(例如核武器的激活码);或者它是一个永远不会被重复使用的值(例如,银行登录的一次性密钥),因此用户每次都必须显式输入数据,而不是能够依靠 UA 为他预填充值;或者文档提供自己的自动完成机制,并且不希望用户代理提供自动完成值。

因此,在经历了与其他人一样的挫折之后,我找到了适合我的解决方案。它与答案相似。autocomplete="false"

Mozilla的一篇文章正好谈到了这个问题:

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

在某些情况下,即使将 autocomplete 属性设置为 off,浏览器也会继续建议自动完成值。对于开发人员来说,这种意外行为可能非常令人费解。真正强制不完成的诀窍是将随机字符串分配给属性

因此,以下代码应该有效:

autocomplete="nope"

以下各项也应如此:

autocomplete="false"
autocomplete="foo"
autocomplete="bar"

我看到的问题是浏览器代理可能足够聪明,可以学习该属性并在下次看到表单时应用它。如果它确实这样做了,那么我仍然可以看到解决该问题的唯一方法是在生成页面时动态更改属性值。autocompleteautocomplete

值得一提的是,许多浏览器会忽略登录字段(用户名和密码)的设置。正如Mozilla文章所述:autocomplete

出于这个原因,许多现代浏览器不支持登录字段的 autocomplete=“off”。

  • 如果网站为表单设置了 autocomplete=“off”,并且表单包含用户名和密码输入字段,则浏览器仍将提供记住此登录信息,如果用户同意,浏览器将在用户下次访问此页面时自动填充这些字段。
  • 如果网站为用户名和密码输入字段设置了 autocomplete=“off”,则浏览器仍将提供记住此登录信息,如果用户同意,浏览器将在用户下次访问此页面时自动填充这些字段。

这是 Firefox(从版本 38 开始)、Google Chrome(从版本 34 开始)和 Internet Explorer(从版本 11 开始)中的行为。

最后,关于属性是属于元素还是元素的一些信息。规范再次给出了答案:forminput

如果省略 autocomplete 属性,则改用与元素表单所有者的 autocomplete 属性的状态相对应的默认值(“on”或“off”)。如果没有表单所有者,则使用值“on”。

因此,将其放在表单上应适用于所有输入字段。将其放在单个元素上应仅适用于该元素(即使表单上没有元素)。如果根本不设置,则默认为 。autocompleteon

总结

要在整个窗体上禁用:autocomplete

<form autocomplete="off" ...>

或者,如果您动态需要执行此操作:

<form autocomplete="random-string" ...>

在单个元素上禁用(无论是否存在表单设置)autocomplete

<input autocomplete="off" ...>

或者,如果您动态需要执行此操作:

<input autocomplete="random-string" ...>

请记住,某些用户代理甚至可以覆盖您最努力的禁用尝试。autocomplete

评论

1赞 Hooligancat 8/7/2019
@user2060451 - 什么不起作用?我刚刚在 Windows 和 Mac 上的 76.0.3809.87 中对其进行了测试。 - 两者都按照上述规范执行。如果您能提供比“不起作用”更多的描述,我可能会为您提供帮助。
1赞 Nuryagdy Mustapayev 1/15/2020
我只是试图给(在加载所有内容并在服务器端设置后从控制台)一个随机字符串用于自动完成输入元素,它不起作用。给 autocomplete=“off” 给表单元素也不起作用。
1赞 Gudradain 5/28/2021
它适用于随机字符串。据我所知,似乎无论您输入什么属性值,chrome 都会保存它。因此,如果您将“关闭”推迟,chrome 会认为“关闭”等于您输入的值。下次您有一个带有“off”的表单时,chrome 将重复使用最后一个值。使用随机值可以解决这个问题,因为如果该值每次都是新的且唯一的,chrome 将永远不会看到它,也不会提出任何建议。
0赞 pishpish 7/26/2021
没有比设置更好的工作了new-password
0赞 Hooligancat 7/27/2021
@pishpish - OP 的问题没有提到任何关于密码字段的内容,而是针对一个标签,这意味着它不是他们有问题的密码字段(尽管它也可能是一个问题字段)。此外,是规范中的一个提示,浏览器可能会也可能不会只关注密码字段。因此,如果并非在所有情况下都适用于密码字段,请不要感到惊讶。selectnew-passwordnew-password
6赞 prajna 1/29/2016 #16

直到上周,下面的两个解决方案似乎适用于Chrome,IE和Firefox。但随着 Chrome 版本 48(仍在 49 中)的发布,它们不再起作用:

  1. 窗体顶部的以下内容:
<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>
  1. 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

评论

0赞 eYe 3/31/2016
@JorgeSampayo 仅适用于密码输入,不适用于文本输入。
0赞 Florian Wendelborn 9/23/2020
为什么有人想在用户名/密码字段上禁用自动完成?浏览器制造商越来越忽视自动完成功能也就不足为奇了。让您的用户使用密码管理器。为了每个人的安全,应该鼓励而不是阻止这种情况。
13赞 Loenix 3/11/2016 #17

我发布此答案是为了解决这个问题。 我目前正在使用 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

评论

1赞 eYe 3/31/2016
不幸的是,Chrome 版本 49.0.2623.87 不适用于 TextBox,我仍然看到自动完成弹出。
5赞 yivo 5/7/2016 #18

在 Chrome 48+ 中,使用以下解决方案:

  1. 将假字段放在真实字段之前:

    <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>
    
  2. 隐藏假字段:

    .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;
    }
    
  3. 你做到了!

这也适用于旧版本。

评论

0赞 Mike Purcell 8/29/2017
@yivo 看起来 urs 和 og 答案之间的唯一区别是 !important 标签,所以我添加了它们,但仍然不起作用。dropbox.com/s/24yaz6ut7ygkoql/......
0赞 yivo 8/30/2017
@MikePurcell 标签上没有。还要尝试在标签后立即放置虚假输入。autocomplete="off"formform
0赞 Mike Purcell 8/30/2017
@Yivo:尝试了您的建议,适用于电子邮件字段,但是密码字段仍然会发生自动填充下拉列表。dropbox.com/s/5pm5hjtx1s7eqt3/......
458赞 Cava 8/16/2016 #19

防止用户名(或电子邮件)和密码的自动完成:

<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"offnope


其他用于禁用字段自动完成的“解决方案”(这不是正确的方法,但它有效):

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+

评论

0赞 Tallboy 1/20/2017
没有代码,如果 autocomplete=“” 应该只接受布尔值,您的答案实际上如何阻止自动完成
5赞 GONeale 7/19/2019
最重要的(也是唯一对我有用的事情)是绝对确保你的 <input> 字段的 ID 和 Name 属性不包含“用户名”或“密码”。这有效地阻止了我在 autocomplete=“off” 上的所有自动完成。
20赞 SeriousLee 6/4/2020
大声笑实际上对我有用,除非我将其添加到我的两个表单字段中。就像我可以在任何一个字段上使用它,然后字段不会自动完成,但另一个字段仍然会自动完成,但是一旦我把它放在两个字段上,它们都会再次开始自动完成。autocomplete="nope"
4赞 Felix 1/14/2021
lol autocomplete=“nope” 效果很好。不过很有趣
1赞 schizoid04 7/3/2021
是时候开始在自动完成标签中输入有趣的文本行了
25赞 Steffi 2/1/2017 #20

你可以使用autocomplete="new-password"

<input type="email" name="email">
<input type="password" name="password" autocomplete="new-password">

工作于:

  • 铬:53、54、55
  • 火狐浏览器:48、49、50

评论

0赞 step 9/20/2019
这不起作用,因为自动完成字符串是固定的。浏览器下次会记住 new-password。
8赞 Mahdi Afzal 10/29/2017 #21

autocomplete=off在现代浏览器中在很大程度上被忽略了 - 主要是由于密码管理器等。

您可以尝试添加此功能,并非所有浏览器都完全支持它,但它适用于某些浏览器autocomplete="new-password"

51赞 step 8/4/2018 #22

始终有效的解决方案

我已经通过使用随机字符解决了与 Google Chrome 的无休止的斗争。当您总是使用随机字符串呈现自动完成时,它永远不会记住任何内容。

<input name="name" type="text" autocomplete="rutjfkde">

希望它能对其他人有所帮助。

2022 年更新:

Chrome 进行了此改进:这将解决它,但我不确定 Chrome 是否在一段时间后再次将其更改为不同的功能。autocomplete="new-password"

评论

0赞 step 6/17/2021
当每个渲染都会有 uniq 随机字符串时,它不可能记住。这不是重点。
2赞 Jessica 3/10/2022
这在 chrome 版本 99.0.4844.51 的电子邮件和密码字段中对我不起作用,但这确实如此:autocomplete=“new-password” 在 developer.mozilla.org/en-US/docs/Web/Security/ 上找到......
0赞 diesel94 7/11/2022
也不适合我
1赞 Furkan Penbegül 10/6/2022
autocomplete=“new-password” 适用于 Chrome 版本-105.0.5195.127
0赞 pstanton 4/20/2023
在回答你无法控制的事情之前,请仔细考虑
11赞 Chris Sprague 11/22/2018 #23

不知道为什么这在我的情况下有效,但是在我使用的 chrome 上,Chrome 停止为我的文本字段建议地址。autocomplete="none"

评论

0赞 Dmitriy 11/5/2020
已使用 Chrome 86.0 确认 /2020 年 11 月
14赞 marco burrometo 1/7/2019 #24

Autocomplete="Off"不再起作用了。

例如,尝试只使用随机字符串而不是"Off"Autocomplete="NoAutocomplete"

我希望它有所帮助。

10赞 Yevgeniy Afanasyev 2/7/2019 #25

autocomplete="off"通常有效,但并非总是如此。这取决于输入字段。“address”、“email”、“name”等名称将自动完成(浏览器认为它们可以帮助用户),而“code”、“pin”等字段将不会自动完成(如果已设置)nameautocomplete="off"

我的问题是 - 自动完成弄乱了谷歌地址助手

我通过重命名它来修复它

<input type="text" name="address" autocomplete="off">

<input type="text" name="the_address" autocomplete="off">

在 chrome 71 中测试。

评论

1赞 NIKHIL C M 5/13/2020
我认为这是删除自动完成的最新方法。2020 年 5 月在 chrome 81 上工作
10赞 minigeek 8/7/2020 #26

写一个 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>

评论

2赞 Robin Chow 2/4/2021
截至 2021 年 2 月 3 日,此解决方案仍然有效 - 在最新的 Chrome、Firefox 和 IE11 上进行了测试。自动完成中的随机字符串不起作用。
0赞 minigeek 2/5/2021
很高兴知道:)
1赞 danday74 11/28/2021
这在最新的 Chrome 27/11/2021 中效果很好 - 也不要使用 name=“email”
9赞 BenHero 12/8/2020 #27

一些结束 2020 年更新。我尝试了来自不同站点的所有旧解决方案。他们都没有奏效!:-(
然后我发现这个:
使用

<input type="search"/> 

自动完成功能消失了!

Chrome 86、FireFox、Edge 87 取得成功。

评论

1赞 Aamir Afridi 1/19/2021
浏览器将为输入添加样式并使其可清除
17赞 thisisashwani 4/9/2021 #28

[适用于 2021 年 Chrome(v88、89、90)、Firefox、Brave、Safari]

这里已经写过的旧答案将通过反复试验来工作,但大多数 他们没有链接到任何官方文档或 Chrome 对此的看法 事。

问题中提到的问题是由于 Chrome 的自动填充功能,以下是 Chrome 在此错误链接中对此的立场 - https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164

简单来说,有两种情况——

  • [案例 1]:您的类型不是 .在这种情况下,解决方案很简单,有三个步骤。inputpassword

    • 将属性添加到nameinput
    • name不应以电子邮件或用户名等值开头,否则 Chrome 最终仍会显示下拉列表。例如,显示下拉列表,但不显示。这同样适用于属性。name="emailToDelete"name="to-delete-email"autocomplete
    • 添加属性,并添加一个对你有意义的值,比如autocompletenew-field-name

    它看起来像这样,你一辈子都不会再看到这个输入的自动填充了——

    <input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
    
  • [案例2]:是inputtypepassword

    • 好吧,在这种情况下,无论您的试用情况如何,Chrome都会向您显示管理密码/使用现有密码的下拉列表。Firefox也会做类似的事情,所有其他主要浏览器也是如此。[1]
    • 在这种情况下,如果你真的想阻止用户看到管理密码的下拉列表/看到安全生成的密码,你将不得不使用JS来切换输入类型,如本问题的其他答案中所述。

[1] 关于关闭自动补全的详细 MDN 文档 - https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

评论

0赞 Gavin 4/14/2021
这是行不通的。我有一个 WordPress 网站,其中包含用户名和密码的输入。对于用户名输入,我有.Chrome 坚持自动填充 WordPress 管理员用户名和密码。<input name="portal_user" type="text" maxlength="64" autocomplete="portal">
0赞 thisisashwani 4/16/2021
嗨,@Gavin,这就是为什么我通过两个单独的案例来回答。请看一下我写的第二个案例。没有直接的方法可以禁用密码的自动填充。MDN 对此有一个很好的文档。这是残酷的事实!对于用户名,理想情况下它应该有效。此外,通过自动填充,我或准确地说是任何浏览器,正在谈论带有保存列表的下拉列表。你说的是自动完成吗?很乐意帮助您解决问题:)
7赞 Naren 12/23/2021 #29

快速破解,如果您即使阅读了上面的答案仍然获得自动完成,您可以尝试一下。提供随机字符串将删除自动完成。

<input autocomplete="somerandomstring" or autocomplete="disabled">

Idk 是否正确,它只是对我有用。

7赞 CodingGoneWrong 8/15/2022 #30

2022年8月更新:

我设法通过包括

autocomplete="new-password"

在每个单独的输入元素上,无论类型如何。

例如

<input id="email" type="email" autocomplete="new-password"/>

评论

0赞 jan 10/12/2022
一个 10 年前的问题,每隔几个月仍然相关。
0赞 CodingGoneWrong 10/13/2022
我知道没错......哈哈
0赞 Jarad 6/25/2023
Chrome 团队故意制造分裂。只要让开发人员能够战略性地关闭自动完成功能即可!取而代之的是,人们创造了暂时有效的黑客攻击。所有这些答案都证明了荒谬。10 年后,很明显他们不听反馈。