我一直在遇到几种形式的Chrome自动填充行为问题。

表单中的所有字段都有非常通用且准确的名称，例如“电子邮件”，“名称”或“密码”，并且它们也已autocomplete="off"设置。

自动完成标志已成功禁用了自动完成行为，该行为会在您开始键入时出现一个下拉列表，但未更改Chrome自动将字段填充为的值。

除了chrome不能正确填充输入（例如用电子邮件地址填充电话输入）之外，这种行为是可以的。客户对此有所抱怨，因此已证实它是在多种情况下发生的，而不是我在计算机上本地完成的操作的某种结果。

我能想到的唯一当前解决方案是动态生成自定义输入名称，然后在后端提取值，但这似乎是解决此问题的一种很怪异的方法。是否有任何可更改自动填充行为的标记或怪癖可用来解决此问题？

对于新的Chrome版本，您只需autocomplete="new-password"在密码字段中输入即可。我已经检查了，效果很好。

在此讨论中，从Chrome开发人员那里获得了提示：https : //bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

PS注意，Chrome会尝试从名称，id和它可能在字段周围得到的任何文本内容（包括标签和任意文本节点）推断出自动填充行为。如果street-address上下文中有自动填充令牌，Chrome会自动填充该令牌。启发式方法可能会造成很大的混乱，因为它有时仅在表单中有其他字段时才触发，而在表单中的字段太少时才触发。另请注意，autocomplete="no"这似乎可行，但autocomplete="off"由于历史原因而不会。autocomplete="no"您是在告诉浏览器该字段应作为字段自动完成"no"。如果生成唯一的随机autocomplete名称，则会禁用自动完成。

如果您的用户访问了错误的表单，则其自动填充信息可能已损坏。让他们手动进入并在Chrome中修复其自动填充信息可能是他们采取的必要措施。

我刚刚发现，如果您记得某个网站的用户名和密码，则当前版本的Chrome会将您的用户名/电子邮件地址自动填充到该字段之前的任何type=password字段。它并不关心该字段的名称-只是假设该字段在密码将作为您的用户名之前使用。

旧解决方案

只需使用<form autocomplete="off">它，它就可以根据浏览器可能做出的假设（通常是错误的）防止密码预填充以及任何形式的启发式填充。<input autocomplete="off">与之相反，使用密码自动填充似乎忽略了这一点（在Chrome中，Firefox确实服从了它）。

更新的解决方案

Chrome现在忽略<form autocomplete="off">。因此，我原来的解决方法（已删除）现在风靡一时。

只需创建几个字段，然后使用“ display：none”将其隐藏即可。例：

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

然后在下面放置您的真实字段。

记住要添加评论，否则团队中的其他人会想知道您在做什么！

2016年3月更新

刚刚使用最新的Chrome进行了测试-一切都很好。现在这是一个相当老的答案，但我想提一下，我们的团队已经在许多项目上使用了多年。尽管下面有一些评论，它仍然可以正常工作。可访问性没有问题，因为这些字段display:none意味着它们不会成为焦点。正如我提到的，您需要将它们放在实际字段之前。

如果您使用javascript修改表单，则需要额外的技巧。在处理表单时显示假字段，然后在一毫秒后再次隐藏它们。

使用jQuery的示例代码（假设您为假字段提供了一个类）：

        $(".fake-autofill-fields").show();
        // some DOM manipulation/ajax here
        window.setTimeout(function () {
            $(".fake-autofill-fields").hide();
        },1);

2018年7月更新

由于Chrome的反可用性专家一直在努力工作，因此我的解决方案不再有效。但是他们以以下形式向我们扔了骨头：

<input type="password" name="whatever" autocomplete="new-password" />

这行得通，并且大部分可以解决问题。

但是，如果您没有密码字段，而只有一个电子邮件地址，则无法使用。也可能很难使它停止变黄并预填充。伪字段解决方案可用于解决此问题。

实际上，有时您需要放入两个假字段，然后在不同的地方尝试。例如，我在表单的开头已经有假字段，但是Chrome最近又开始重新填充“电子邮件”字段-因此，我加倍并在“电子邮件”字段之前放置了更多假字段，并对此进行了修复。删除第一批或第二批字段将还原为不正确的过度热情的自动填充。

2020年3月更新

目前尚不清楚该解决方案何时以及何时仍然有效。它有时似乎仍然有效，但并非始终如此。

在下面的评论中，您会找到一些提示。@anilyeni刚添加的一个可能值得进一步调查：

如我所知，autocomplete="off"如果中的元素少于3个，则可在Chrome 80上使用<form>。我不知道逻辑是什么，或有关它的相关文档在哪里。

@dubrox的这个也可能是相关的，尽管我没有测试过：

非常感谢您的窍门，但请更新答案，因为display:none;它不再起作用，但position: fixed;top:-100px;left:-100px; width:5px;:)

更新2020年4月

此属性的chrome特殊值正在执行此工作：（已在输入中测试-但不是由我测试） autocomplete="chrome-off"

经过数月的努力，我发现解决方案比您想象的简单得多：

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

就这么简单，它在Google Chrome浏览器中也很吸引人！

2019年8月更新（在评论中注明@JonEdiger）

注意：许多在线信息表明浏览器现在将autocomplete ='false'等同于autocomplete ='off'。至少到目前为止，这正在阻止这三种浏览器自动完成。

将其设置为表单级别，然后对于您要关闭的输入，将其设置为一些无效值，例如“ none”：

<form autocomplete="off"> 
  <input type="text" id="lastName" autocomplete="none"/> 
  <input type="text" id="firstName" autocomplete="none"/>
</form>

有时甚至autocomplete=off无法阻止将凭证填充到错误的字段中。

一种解决方法是使用只读模式禁用浏览器自动填充，并将焦点设置为可写：

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

该focus事件发生在鼠标单击并在字段之间切换时。

更新：

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/

// UpdateEnd

说明：浏览器会自动将凭据填充到错误的文本字段？

错误地填写了输入内容，例如用电子邮件地址填充了电话输入内容

有时候，当密码字段的格式相同时，我会在Chrome和Safari上发现这种奇怪的行为。我猜想，浏览器会寻找密码字段来插入您保存的凭据。然后，它将用户名自动填充到最近的textlike-input字段中，该字段出现在DOM中的password字段之前（只是由于观察而猜测）。由于浏览器是最后一个实例，您无法控制它，

上面的只读修复对我有用。

如果要实现搜索框功能，请尝试将type属性设置search如下：

<input type="search" autocomplete="off" />

这在Chrome v48上对我有效，并且似乎是合法的标记：

https://www.w3.org/wiki/HTML/Elements/input/search

尝试这个。我知道这个问题有些古老，但这是解决问题的另一种方法。

我还注意到问题刚好超出password领域。

我尝试了两种方法

<form autocomplete="off">并且<input autocomplete="off">但是他们没有为我工作。

因此，我使用下面的代码段对其进行了修复-只是在密码类型字段上方添加了另一个文本字段，并将其制成display:none。

像这样：

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

希望它会帮助某人。

我不知道为什么，但这对我有所帮助。

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

我不知道为什么，但是autocompelete =“ new-password”禁用了自动填充。它适用于最新的49.0.2623.112镀铬版本。

对我来说，简单

<form autocomplete="off" role="presentation">

做到了。

经过多个版本测试，最后一次尝试是56.0.2924.87

您必须添加以下属性：

autocomplete="new-password"

来源链接：全文

它是如此简单和棘手:)

谷歌浏览器基本上搜索，和标签内的每个第一个可见密码元素<form>，以对其进行自动填充，因此要禁用此功能，您需要添加一个虚拟密码元素，如下所示：<body><iframe>

1. • 如果您的密码元素位于<form>标签内，则需要在<form>打开标签后立即将虚拟元素作为表单中的第一个元素

   • 如果您的密码元素不在<form>标签内，则在<body>打开标签后立即将虚拟元素作为html页面中的第一个元素

2. 您需要隐藏虚拟元素而不使用css，display:none因此基本上将以下内容用作虚拟密码元素。

   <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>

这是我建议的解决方案，因为Google坚持要覆盖人们似乎做出的所有解决方法。

选项1-单击选择所有文本

将输入的值设置为您的用户的示例（例如your@email.com）或字段的标签（例如Email），然后focus-select在输入中添加一个名为的类：

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

这是jQuery：

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

我真的看不到Chrome曾经搞乱价值观。那太疯狂了。因此，希望这是一个安全的解决方案。

选项2-将电子邮件值设置为空格，然后将其删除

假设您有两个输入，例如email和password，请将email字段的值设置为" "（空格）并添加attribute / value autocomplete="off"，然后使用JavaScript清除它。您可以将密码值保留为空。

如果用户由于某种原因没有使用JavaScript，请确保修剪他们的输入服务器端（无论如何也应该这样做），以防他们不删除空格。

这是jQuery：

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

我将超时设置为，15因为5在我的测试中似乎偶尔会起作用，所以将这个数字增加三倍似乎是一个安全的选择。

未能将初始值设置为空格会导致Chrome将输入保留为黄色，就好像它已自动填充一样。

选项3-隐藏的输入

将其放在表格的开头：

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS：

.hide{ display:none; }

确保保留HTML注释，以免其他开发人员将其删除！同时确保隐藏输入的名称相关。

使用css text-security：光盘而不使用type = password。

html

<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />

or

<form autocomplete='off'>
    <input type='text' name='user' />
    <input type='text' name='pass' class='secure' />
</form>

的CSS

input.secure {
    text-security: disc;
    -webkit-text-security: disc;
}

在某些情况下，即使将autocomplete属性设置为off，浏览器也会继续建议自动补全值。对于开发人员而言，这种意外行为可能会令人困惑。真正强制不自动补全的技巧是为属性分配一个随机字符串，例如：

autocomplete="nope"

我发现将其添加到表单会阻止Chrome使用自动填充功能。

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

在这里找到。https://code.google.com/p/chromium/issues/detail?id=468153#hc41

令我感到非常失望的是，Chrome浏览器认为它比开发人员更了解何时自动完成。对微软有一种真正的感觉。

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

向标签添加readonly属性以及onfocus事件，将其删除可解决此问题

对于用户名密码组合，这是一个很容易解决的问题。Chrome浏览器启发式查找模式：

<input type="text">

其次是：

<input type="password">

只需通过使此无效来中断此过程：

<input type="text">
<input type="text" onfocus="this.type='password'">

Mike Nelsons提供的解决方案不适用于Chrome 50.0.2661.102 m。只需添加与display：none类型相同类型的输入元素，就不再禁用本机浏览器的自动完成功能。现在，必须复制您要禁用自动完成功能的输入字段的名称属性。

另外，为避免输入字段在表单元素内时重复输入字段，应在未显示的元素上放置一个禁用项。这将阻止该元素作为表单操作的一部分提交。

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

在2016年，Google Chrome浏览器开始忽略autocomplete=off它是否在W3C中。他们发布的答案：

这里最棘手的部分是，在整个Web旅程中，某个地方的autocomplete = off成为许多表单字段的默认值，而没有真正考虑过这样做是否对用户有利。这并不意味着没有非常不希望使用的浏览器自动填充数据的情况（例如，在CRM系统上），但是总的来说，我们认为这是少数情况。因此，我们开始忽略Chrome自动填充数据的autocomplete = off。

本质上说：我们更了解用户的需求。

他们打开了另一个错误，当需要autocomplete = off时发布有效的用例

我没有看到与我的所有B2B应用程序中的自动完成有关的问题，仅与密码类型的输入有关。

如果屏幕上有任何密码字段（甚至是隐藏的密码字段），则自动填充功能会介入。要打破这种逻辑，可以将每个密码字段设置为自己的形式（如果它不违反自己的页面逻辑）。

<input type=name >

<form>
    <input type=password >
</form>

如果您在保留占位符但禁用chrome自动填充方面遇到问题，我发现了这种解决方法。

问题

的HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

http://jsfiddle.net/xmbvwfs6/1/

上面的示例仍然会产生自动填充问题，但是，如果您使用required="required"和一些CSS，则可以复制占位符，而Chrome不会拾取标签。

解

的HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

的CSS

input {
    margin-bottom: 10px;
    width: 200px;
    height: 20px;
    padding: 0 10px;
    font-size: 14px;
}
input + label {
    position: relative;
    left: -216px;
    color: #999;
    font-size: 14px;
}
input:invalid + label { 
    display: inline-block; 
}
input:valid + label { 
    display: none; 
}

http://jsfiddle.net/mwshpx1o/1/

我真的不喜欢制作隐藏字段，我认为这样做会很快使人迷惑。

在您要停止自动完成的输入字段上，这将起作用。将字段设置为只读，然后重点删除该属性，如下所示

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

它的作用是，您首先必须通过选择字段来删除只读属性，届时，您很有可能会用自己的用户输入填充并弯腰自动填充以接管

由chrome缓存的先前输入的值显示为下拉选择列表。可以通过autocomplete = off禁用它，在chrome的高级设置中显式保存的地址会在地址字段获得焦点时自动弹出弹出窗口。可以通过autocomplete =“ false”来禁用但是，它将允许chrome在下拉列表中显示缓存的值。

在输入html字段中，以下两项将同时关闭。

Role="presentation" & autocomplete="off"

在为地址自动填充选择输入字段时，Chrome会忽略那些没有前面标签html元素的输入字段。

为了确保chrome解析器忽略自动填充地址弹出的输入字段，可以在标签和文本框之间添加隐藏的按钮或图像控件。这将破坏标签-输入对创建自动填充的镶边解析顺序。解析地址字段时忽略复选框

Chrome浏览器还会在标签元素上考虑“ for”属性。它可用于中断chrome的解析顺序。

好吧，既然我们都有这个问题，我就花了一些时间为这个问题编写一个有效的jQuery扩展。Google必须遵循html标记，而不是我们遵循Google

(function ($) {

"use strict";

$.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({
        attribute : 'autocomplete',
        trigger : {
            disable : ["off"],
            enable : ["on"]
        },
        focus : function() {
            $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) {
        el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
            el.find('input').autoCompleteFix({force:force});
        } else {
            var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

只需将其添加到/js/jquery.extends.js之类的文件中，然后将其包含在jQuery中即可。将其应用于文档加载时的每个表单元素，如下所示：

$(function() {
    $('form').autoCompleteFix();
});

jsfiddle与测试

尝试以下jQuery对我有用的代码。

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}

这有两部分。Chrome和其他浏览器会记住以前输入的字段名称值，并根据该值向用户提供自动完成列表（值得注意的是，出于相当明显的原因，永远不会以这种方式记住密码类型的输入）。您可以autocomplete="off"在电子邮件字段之类的内容上添加以防止这种情况。

但是，您将拥有密码填充符。大多数浏览器都有自己的内置实现，并且还有许多第三方实用程序提供此功能。这，你不能停止。这是用户自己选择保存此信息以在以后自动填充的信息，并且完全超出了应用程序的范围和影响范围。

根据Chromium错误报告＃352347， Chrome不再尊重autocomplete="off|false|anythingelse"表单和输入。

对我有用的唯一解决方案是添加一个虚拟密码字段：

<input type="password" class="hidden" />
<input type="password" />

通过设置autocomplete为off应该可以在这里工作，我有一个Google在搜索页中使用的示例。我从检查元素中发现了这一点。

编辑：如果off不起作用，请尝试false或nofill。就我而言，它适用于Chrome版本48.0

这是一个肮脏的骇客-

您的元素在此处（添加disabled属性）：

<input type="text" name="test" id="test" disabled="disabled" />

然后在网页底部放一些JavaScript：

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

不同的解决方案，基于Webkit。如前所述，只要Chrome浏览器找到密码字段，它就会自动填写电子邮件。AFAIK，这与自动完成= [whatever]无关。

为了避免这种情况，请将输入类型更改为文本，并以所需的任何形式应用webkit安全字体。

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

从我可以看到，这至少与输入type = password一样安全，它的复制和粘贴安全。但是，通过删除将删除星号的样式，它很容易受到攻击，当然，在控制台中可以很容易地将输入类型=密码更改为输入类型=文本，以显示任何自动填充的密码，因此实际上是一样的。

对我有用的唯一方法是：（需要jQuery）

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

我也遇到过同样的问题。这是在Chrome上禁用自动填充用户名和密码的解决方案（仅在Chrome上进行了测试）

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">