Html 禁用Chrome自动填充

我在一些表单上遇到了chrome自动填充行为的问题

表单中的字段都有非常通用和准确的名称，例如“电子邮件”、“名称”或“密码”，并且它们还设置了

autocomplete=“off”

autocomplete标志已成功禁用autocomplete行为，即在您开始键入时显示值下拉列表，但未更改Chrome自动填充字段的值

除了chrome不正确地填充输入之外，这种行为是可以的，例如用电子邮件地址填充电话输入。客户对此表示不满，因此已证实在多种情况下都会发生这种情况，而不是我在本地机器上所做的某种结果

---

目前我能想到的唯一解决方案是动态生成自定义输入名称，然后在后端提取值，但这似乎是解决这个问题的一种非常有技巧的方法。是否有任何标签或怪癖可以改变自动填充行为来修复此问题？

我刚刚发现，如果您记住了某个站点的用户名和密码，当前版本的Chrome将在任何

type=password

字段之前自动填充您的用户名/电子邮件地址。它不关心该字段的名称，只是假设该字段的密码是您的用户名

旧解决方案

只需使用

，它可以防止密码预填充以及基于浏览器可能做出的假设（通常是错误的）对字段进行任何类型的启发式填充。与使用

相反，密码自动填充似乎忽略了这一点（在Chrome浏览器中，Firefox确实遵守了这一点）

更新的解决方案

Chrome现在忽略

。因此，我原来的变通方法（我已经删除）现在风靡一时

只需创建几个字段，并使用“display:none”将其隐藏。例如：

然后把你真正的领域下

记住添加评论，否则团队中的其他人会怀疑你在做什么

2016年3月更新

刚刚测试了最新的铬-一切都好。这是一个相当古老的答案，但我想说的是，我们的团队已经在几十个项目上使用了多年。尽管下面有一些评论，但它仍然非常有效。可访问性没有问题，因为字段是

display:none

，这意味着它们没有焦点。正如我提到的，你需要把它们放在你真正的领域之前

如果您正在使用javascript修改表单，那么您还需要一个额外的技巧。在操纵窗体时显示假字段，然后在毫秒后再次隐藏它们

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

$（“.fake autofill字段”）.show（）；
//这里有一些DOM操作/ajax
setTimeout（函数（）{
$（“.false自动填充字段”）.hide（）；
}, 1);

2018年7月更新

由于Chrome的反可用性专家一直在努力工作，我的解决方案不再那么有效。但他们给了我们一根骨头：

这是可行的，主要解决了这个问题

但是，当您没有密码字段而只有电子邮件地址时，它不起作用。这也很难让它停止变黄和预填充。假字段解决方案可用于修复此问题

事实上，你有时需要在两个虚假的领域下降，并尝试在不同的地方。例如，我在表单的开头已经有了假字段，但是Chrome最近又开始在我的“Email”字段前加前缀，所以我加倍努力，在“Email”字段前加了更多假字段，这就解决了这个问题。删除第一批或第二批字段将恢复为错误的过度自动填充

2020年3月更新

目前尚不清楚该解决方案是否以及何时仍然有效。它有时似乎仍然有效，但并非一直有效

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

正如我注意到的，

autocomplete=“off”

在Chrome80上工作，如果

中的元素少于三个。我不知道逻辑是什么，也不知道相关文档在哪里

另外，来自@dubrox的这一条可能与此相关，尽管我还没有对其进行测试：

非常感谢你的技巧，但是请更新答案，如

display:none不再工作，但
位置：固定；顶部：-100px；左：-100px；宽度：5px执行：）

2020年4月更新

chrome的这个属性的特殊值是执行任务：（在输入时测试-但不是由我测试）
autocomplete=“chrome off”
我刚刚发现，如果您记住了某个站点的用户名和密码，当前版本的chrome会在任何
type=password
字段之前自动将您的用户名/电子邮件地址填入该字段。它不关心该字段的名称，只是假设该字段的密码是您的用户名

旧解决方案

只需使用
，它可以防止密码预填充以及基于浏览器可能做出的假设（通常是错误的）对字段进行任何类型的启发式填充。与使用
相反，密码自动填充似乎忽略了这一点（在Chrome浏览器中，Firefox确实遵守了这一点）

更新的解决方案

Chrome现在忽略
。因此，我原来的变通方法（我已经删除）现在风靡一时

只需创建几个字段，并使用“display:none”将其隐藏。例如：



然后把你真正的领域下

记住添加注释或其他p
if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}

<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" readonly onfocus="this.removeAttribute('readonly');"/>

<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();  }" />

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

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

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

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

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; 
}

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

<input type="text">

<input type="password">

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

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

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

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

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

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

.hide{ display:none; }

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

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

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

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

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

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

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

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

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

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

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

autocomplete="new-password"

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

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

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

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

autocomplete="nope"

<input type=name >

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