Chrome会忽略autocomplete ="off"

Question

我创建了一个使用标记框下拉列表的Web应用程序.这适用于除Chrome浏览器(版本21.0.1180.89)以外的所有浏览器.

尽管input字段和form字段都具有该autocomplete="off"属性,但Chrome 仍然会显示该字段的先前条目的下拉历史记录,这会删除标记框列表.

Answer 1

UPDATE

现在看来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>是案件得到了解决.

Answer 2

防止自动填写用户名(或电子邮件)和密码:

<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(onload):

(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(onload):

(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>

适用于:

• Chrome:49+

• Firefox:44+

Answer 3

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

Answer 4

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

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

Answer 5

现代方法

只需进行输入readonly,并在焦点上移除它.这是一种非常简单的方法,浏览器不会填充readonly输入.因此,此方法已被接受,并且永远不会被未来的浏览器更新覆盖.

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

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

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

工作实例

Answer 6

嗯,派对有点晚了,但似乎有一些误解,autocomplete应该和不应该有效.根据HTML规范,用户代理(在本例中为Chrome)可以覆盖autocomplete:

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

用户代理可以允许用户覆盖元素的自动填充字段名称,例如将其从"关闭"更改为"开启"以允许值被记住并预填充,尽管页面作者的反对,或者总是"关闭",永远不会记住值.但是,用户代理不应允许用户轻易地将自动填充字段名称从"关闭"覆盖到"打开"或其他值,因为如果始终记住所有值,则无论站点的首选项如何,都会对用户产生重大安全隐患.

因此,就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"

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

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

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

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

这是Firefox(自版本38以来),Google Chrome(自34版本)和Internet Explorer(自版本11以来)以来的行为.

最后,关于属性是属于form元素还是input元素的一些信息.该规范再次得到答案:

如果省略autocomplete属性,则使用与元素的表单所有者的自动完成属性的状态对应的默认值("on"或"off").如果没有表单所有者,则使用值"on".

所以.将其放在表单上应该适用于所有输入字段.将它放在单个元素上应该仅适用于该元素(即使表单上没有元素).如果autocomplete未设置,则默认为on.

摘要

要autocomplete在整个表单上禁用:

<form autocomplete="off" ...>

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

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

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

<input autocomplete="off" ...>

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

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

并且请记住,某些用户代理甚至可以覆盖您最难打的禁用尝试autocomplete.

Answer 7

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

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

更新04/04/2016:看起来这是固定的!见http://codereview.chromium.org/1473733008

Answer 8

Chrome版本34现在忽略了autocomplete=off, 请看这个.

关于这是好事还是坏事的讨论很多？你的意见怎么样？

Answer 9

浏览器不关心自动完成=关闭自动甚至填写凭据到错误的文本字段？

我通过将密码字段设置为只读并激活它来修复它,当用户点击它或使用tab键到该字段时.

修复浏览器自动填充:readonly并在焦点上设置writeble(鼠标单击并在tabing through fields中)

 <input type="password" readonly  
     onfocus="$(this).removeAttr('readonly');"/>

更新:Mobile Safari将光标设置在字段中,但不显示虚拟键盘.New Fix像以前一样工作,但处理虚拟键盘:

<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/

// UpdateEnd

顺便提一下,关于我观察的更多信息:

当有相同表格的密码字段时,有时我会注意到Chrome和Safari上的这种奇怪行为.我猜,浏览器会查找密码字段以插入您保存的凭据.然后它将用户名自动填充到最近的textlike-input字段中,该字段出现在DOM中的密码字段之前(仅因为观察而猜测).由于浏览器是最后一个实例而您无法控制它,因此有时甚至autocomplete = off也不会阻止将凭据填入错误的字段,而不是用户或昵称字段.

Answer 10

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

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

适用于:

• Chrome:53,54,55
• Firefox:48,49,50

Answer 11

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>

您可以使用此autocomplete="new-password"标志告诉Chrome不要猜测密码，即使该密码已存储在该站点中也是如此。

Chrome还可以直接使用凭据API来管理网站的密码，这是一种标准，最终可能会获得普遍支持。

Answer 12

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

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

希望对其他人有帮助。

Answer 13

[2021 年适用于 Chrome（v88、89、90）、Firefox、Brave、Safari]

The old answers already written here will work with trial and error, but most of them don't link to any official doc or what Chrome has to say on this matter.

The issue mentioned in the question is because of Chrome's autofill feature, and here is Chrome's stance on it in this bug link - https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164

To put it simply, there are two cases -

• [CASE 1]: Your input type is something other than password. In this case, the solution is simple, and has three steps.

  • Add name attribute to input
  • name should not start with a value like email or username, otherwise Chrome still ends up showing the dropdown. For example, name="emailToDelete" shows the dropdown, but name="to-delete-email" doesn't. Same applies for autocomplete attribute.
  • Add autocomplete attribute, and add a value which is meaningful for you, like new-field-name

  It will look like this, and you won't see the autofill for this input again for the rest of your life -

  <input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
  

• [CASE 2]: input type is password

  • Well, in this case, irrespective of your trials, Chrome will show you the dropdown to manage passwords / use an already existing password. Firefox will also do something similar, and same will be the case with all other major browsers. [1]
  • In this case, if you really want to stop the user from seeing the dropdown to manage passwords / see a securely generated password, you will have to play around with JS to switch input type, as mentioned in the other answers of this question.

[1] A detailed MDN doc on turning off autocompletion - https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Answer 14

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

Answer 15

看到铬忽略了autocomplete="off",我用一种愚蠢的方式解决它,使用"假输入"欺骗铬填充它而不是填充"真正的".

例:

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

Chrome将填写"虚假输入",并在提交时,服务器将采用"实际输入"值.

Answer 16

我发布此答案是为此问题提供更新的解决方案.我目前正在使用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

Answer 17

Autocomplete="Off" 不再工作了。

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

希望对您有所帮助。

Answer 18

autocomplete="off"通常工作，但并非总是如此。这取决于name输入字段的 。诸如“地址”、“电子邮件”、“姓名”之类的名称 - 将自动完成（浏览器认为它们对用户有帮助），当诸如“代码”、“pin”之类的字段时，将不会自动完成（如果autocomplete="off"已设置）

我的问题是 - 自动完成与谷歌地址助手混淆

我通过重命名来修复它

从

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

到

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

在铬 71 中测试。

Answer 19

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

<input type="search"/> 

自动完成功能消失了！

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

Answer 20

更新 08/2022：

我设法让自动完成功能受到尊重，包括

autocomplete="new-password"

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

例如

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

Answer 21

任何人寻找一个解决方案,这一点,我终于弄明白.

铬只服从是自动完成="关闭"如果网页是一个HTML5页面(我用的是XHTML).

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

Answer 22

如果这对任何人有帮助，请写下 2020 年的答案。我尝试了上面的多种组合，尽管在我的案例中遗漏了一个键。即使我保留了 autocomplete="nope" 一个随机字符串，它对我不起作用，因为我缺少name属性！

所以我保留了 name='password' 和 autocomplete = "new-password"

对于用户名，我保留了 name="usrid" // 不要保留包含 'user' 的字符串

and autocomplete = "new-password" // 也一样，所以谷歌停止建议密码（管理密码下拉菜单）

这对我来说非常有效。（我为 Cordova/ionic 使用的 Android 和 iOS 网络视图做了这个）

<ion-input [type]="passwordType" name="password" class="input-form-placeholder" formControlName="model_password"
        autocomplete="new-password" [clearInput]="showClearInputIconForPassword">
</ion-input>

Answer 23

快速破解，如果您即使阅读上面的答案仍然得到自动完成，您可以尝试这个。提供随机字符串将删除自动完成功能。

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

我不知道它是否正确，它对我有用。

Answer 24

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

1. 表格顶部的以下内容:

<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>

2. 密码输入元素中的以下内容:

   自动填充="关闭"

因此,为了快速解决这个问题,我首先尝试使用最初将密码输入元素设置为禁用的主要黑客,然后在文档就绪函数中使用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

Answer 25

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

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

Answer 26

chrome v.34之后， tagautocomplete="off"设置<form>不起作用

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

1. 去掉密码输入的name和id
2. 在输入中放置一个类（例如：passwordInput）

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

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

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

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

Answer 27

我遇到了类似的问题，输入字段采用姓名或电子邮件。我设置了 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" />

Answer 28

而不是autocomplete ="off"使用autocomplete ="false" ;)

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

Answer 29

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

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

Answer 30

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

这也适用于旧版本。

Answer 31

我设法利用此规则禁用自动完成：

不是密码但应该被隐藏的字段，例如信用卡号，也可能具有 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">

然而，它伴随着巨大的责任:)

不要试图欺骗浏览器 密码管理器（内置于浏览器或外部）旨在简化用户体验。插入虚假字段、使用不正确的自动完成属性或利用现有密码管理器的弱点只会让用户感到沮丧。