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

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

更新

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

防止自动完成用户名（或电子邮件）和密码：

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

• Firefox：44岁以上

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

现代方法

只需输入您的输入readonly，然后集中精力删除它即可。这是一种非常简单的方法，浏览器不会填充readonly输入。因此，此方法已被接受，以后的浏览器更新将永远不会覆盖它。

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

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

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

工作实例

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

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

好吧，晚了一点，但似乎对于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/zh-CN/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元素的一些信息。规范再次有答案：

如果省略了自动完成属性，则将使用与元素的表单所有者的自动完成属性的状态相对应的默认值（“开”或“关”）。如果没有表单所有者，则使用值“ on”。

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

摘要

要禁用autocomplete整个表单：

<form autocomplete="off" ...>

或者，如果您动态需要这样做：

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

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

<input autocomplete="off" ...>

或者，如果您动态需要这样做：

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

请记住，某些用户代理甚至可以覆盖您最艰难的尝试来禁用autocomplete。

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

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

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

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

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

浏览器不关心autocomplete = off auto还是将凭据填充到错误的文本字段？

我通过将密码字段设置为只读并在用户单击它或使用Tab键对此字段进行激活时将其激活来修复它。

修复浏览器自动填充：只读并设置可写焦点的问题（单击鼠标并在字段之间切换）

 <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中的password字段之前（只是由于观察而猜测）。由于浏览器是最后一个实例，您无法控制它，所以有时即使autocomplete = off也不会阻止将凭据填写到错误的字段中，而不是用户或昵称字段中。

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

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

适用于：

• 铬：53、54、55
• Firefox：48、49、50

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

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

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

希望对其他人有帮助。

Autocomplete="Off" 不再工作了。

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

希望对您有所帮助。

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

例：

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

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

我将发布此答案，以为该问题带来更新的解决方案。我目前正在使用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

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

如果页面是HTML5页面（我使用的是XHTML），Chrome仅服从autocomplete =“ off”。

我将页面转换为HTML5，问题消失了（facepalm）。

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

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

直到上周，以下两种解决方案似乎都适用于Chrome，IE和Firefox。但是随着Chrome版本48（仍然是49）的发布，它们不再起作用：

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

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

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

   autocomplete =“ off”

因此，为了快速解决此问题，起初我尝试使用一个主要技巧，即最初将密码输入元素设置为禁用，然后在文档准备功能中使用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

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

您可以尝试添加autocomplete="new-password"它，并非所有浏览器都完全支持它，但是它可以在某些浏览器上运行

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

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

我通过重命名来修复它

从

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

至

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

经过铬71测试。

代替autocomplete =“ off”，使用autocomplete =“ false” ;）

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

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

从Chrome 42开始，该线程（截至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来清除伪造的字段。

旧答案：

我发现仍然可行的唯一方法是在实际字段之前插入两个类型为email和password的虚拟字段。您可以将它们设置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>

不幸的是，这些字段必须在您的表单内（否则，这两组输入都将自动填充）。因此，要使假字段真正被忽略，您需要在表单提交上运行一些JS以清除它们：

form.addEventListener('submit', function() {
    form.elements['fake_email'].value = '';
    form.elements['fake_password'].value = '';
});

从上面注意到，使用Javascript清除值可以覆盖自动完成功能。因此，如果在禁用JS的情况下失去适当的行为是可以接受的，则可以使用适用于Chrome的JS自动完成“ polyfill”来简化所有操作：

(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 =“ 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" />

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

这也适用于旧版本。

在chrome v。34 之后，autocomplete="off"在<form>标签处设置无效

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

1. 删除name和id密码输入
2. 把一类的输入（例如：passwordInput）

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

最后，要使表单正常工作，请在用户单击“提交”按钮时，或者在您希望触发表单提交的任何时候运行以下代码：

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

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

在尝试了所有解决方案之后，以下似乎适用于chrome版本：45，表单具有密码字段：

 jQuery('document').ready(function(){
        //For disabling Chrome Autocomplete
        jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000));
 });

我刚刚更新到Chrome 49，Diogo 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();
    });
});

我知道它看起来似乎不是很优雅，但确实可行。

我发现此解决方案最合适：

function clearChromeAutocomplete()
{
// not possible, let's try: 
if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) 
{
document.getElementById('adminForm').setAttribute('autocomplete', 'off'); 
setTimeout(function () {
        document.getElementById('adminForm').setAttribute('autocomplete', 'on'); 
}, 1500);
}
}

必须在dom准备就绪或表单呈现后加载。

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

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

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

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