Chrome会忽略autocomplete =“ off” \[重复\]

html HTML

NearJinJin

2020-03-22

我创建了一个使用标签箱下拉菜单的Web应用程序。此功能在Chrome浏览器(版本21.0.1180.89)以外的所有浏览器中均适用。

尽管input字段和form具有autocomplete="off"属性字段都存在,但Chrome仍坚持显示该字段先前条目的下拉历史记录,这使标记框列表消失了。

第2569篇《Chrome会忽略autocomplete =“ off” \[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

21个回答
Mandy逆天路易 2020.03.22

尽管我同意自动完成功能应该是用户的选择,但Chrome有时还是过于热衷(其他浏览器也可能如此)。例如,具有不同名称的密码字段仍会自动使用保存的密码填充,而先前的字段会填充用户名。当表单是Web应用程序的用户管理表单,并且您不希望自动填充功能使用您自己的凭据填充它时,这尤其糟糕。

Chrome现在完全忽略了autocomplete =“ off”。尽管JS hacks可能很好用,但在撰写本文时,我发现了一种简单的方法:

将密码字段的值设置为控制字符8("\x08"在PHP或HTML中)。Chrome会自动填充该字段,因为它具有一个值,但由于这是退格字符,因此未输入任何实际值。

是的,这仍然是一个hack,但是对我有用。YMMV。

逆天飞云 2020.03.22

我刚刚更新到Chrome 49Diogo Cid的解决方案不再起作用。

在页面加载后,我在运行时隐藏和删除了字段,这是另一种解决方法。

Chrome现在忽略了将凭据应用于显示 的第一个type="password"字段及其上一个type="text"字段的原始解决方法,因此我使用CSS隐藏了这两个字段 visibility: hidden;

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

我知道它似乎不太优雅,但可以。

飞云 2020.03.22

在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"输入密码,因此在触发提交之前将它们放回原处。

Stafan路易 2020.03.22

我有一个类似的问题,其中输入字段使用名称或电子邮件。我设置为autocomplete =“ off”,但Chrome仍然强制执行建议。原来是因为占位符文本中包含单词“ name”和“ email”。

例如

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

我通过在占位符中的单词中添加零宽度的空格来解决此问题。Chrome不再自动完成。

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />
村村 2020.03.22

在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. 你做到了!

这也适用于旧版本。

前端前端猴子 2020.03.22

autocomplete="off"通常在工作,但并非总是如此。它取决于name输入字段的。诸如“地址”,“电子邮件”,“名称”之类的名称将自动完成(浏览器认为它们可以帮助用户),而诸如“代码”,“固定”之类的字段将不会自动完成(如果autocomplete="off"已设置)

我的问题是-自动填充功能与Google 地址帮助程序搞混了

我通过重命名来修复它

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

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

经过镀铬测试。

斯丁卡卡西 2020.03.22

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

Google不会将自动填充应用于具有搜索类型的输入。

Davaid小胖 2020.03.22

代替autocomplete =“ off”,使用autocomplete =“ false” ;)

来自:https : //stackoverflow.com/a/29582380/75799

番长樱梅 2020.03.22

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

逆天梅 2020.03.22

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

如果页面是HTML5页面(我使用的是XHTML),Chrome仅服从autocomplete =“ off”。

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

凯小卤蛋 2020.03.22

我将发布此答案,以为该问题带来更新的解决方案。我目前正在使用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
  • 的Firefox:44、45
  • 边缘:25
  • Internet Explorer:11
小宇宙 2020.03.22

autocomplete=off 在现代浏览器中基本上被忽略-主要是由于密码管理器等。

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

LGil 2020.03.22

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

例:

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

Chrome将填充“假输入”,提交后,服务器将获取“真实输入”值。

西里ProL 2020.03.22

Autocomplete="Off" 不再工作了。

尝试使用只是一个随机字符串代替"Off",例如Autocomplete="NoAutocomplete"

希望对您有所帮助。

小宇宙达蒙 2020.03.22

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

关于这是好是坏的很多讨论您对此有何看法?

DavaidTony宝儿 2020.03.22

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

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

适用于:

  • 铬:53,54,55
  • Firefox:48、49、50
Itachi 2020.03.22

我已经通过使用随机字符解决了与Google Chrome浏览器的无休止的战斗。当您始终使用随机字符串呈现自动完成功能时,它将永远不会记住任何内容。

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

希望对其他人有帮助。

番长樱梅 2020.03.22

目前的解决方案是使用type="search"Google不会将自动填充应用于具有搜索类型的输入。

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

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

乐十三 2020.03.22

为了获得可靠的解决方法,您可以将此代码添加到布局页面:

<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

更新:2016年3月11日,Chromium团队将漏洞关闭为“无法修复”。有关完整说明,请参见我最初提交的漏洞报告中的最后评论TL; DR:使用语义自动完成属性,例如autocomplete =“ new-street-address”以避免Chrome执行自动填充。

凯西里 2020.03.22

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

Stafan 2020.03.22

更新

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>此案已解决。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android