停用Chrome自动填充功能

Question

我在几种形式上遇到了chrome自动填充行为的问题.

表单中的字段都有非常常见和准确的名称,例如"email","name"或"password",它们也有autocomplete="off"set.

自动填充标记已成功禁用自动填充行为,其中在您开始输入时会显示值下拉列表,但未更改Chrome自动填充字段的值.

这种行为是可以的,除了chrome正在填充输入错误,例如用电子邮件地址填充电话输入.客户抱怨这一点,因此经过验证可以在多种情况下进行验证,而不是因为我在我的机器上本地完成了某些事情.

我能想到的唯一当前解决方案是动态生成自定义输入名称,然后在后端提取值,但这似乎是一个非常讨厌这个问题的方法.是否有任何标签或怪癖会改变可用于解决此问题的自动填充行为？

Answer 1

对于新的Chrome版本,您只需autocomplete="new-password"输入密码字段就可以了.我检查过,工作正常.

在此讨论中得到了Chrome开发人员的提示:https: //bugs.chromium.org/p/chromium/issues/detail？id = 370363#c7

PS不要忘记为不同的字段使用唯一的名称来防止自动填充.

Answer 2

我刚刚发现,如果您有一个记住的网站用户名和密码,当前版本的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最近再次开始预填充我的"电子邮件"字段 - 然后我在"电子邮件"字段之前加倍填写更多假字段,并修复了它.删除第一个或第二个字段将恢复为不正确的过度自动填充.

Answer 3

经过数月和数月的奋斗,我发现解决方案比你想象的要简单得多:

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

就这么简单,它就像谷歌Chrome中的魅力一样!

Answer 4

有时甚至autocomplete=off不会阻止将凭据填入错误的字段.

解决方法是使用readonly-mode禁用浏览器自动填充并在焦点上设置可写:

 <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中的密码字段之前(仅因为观察而猜测).由于浏览器是最后一个实例而您无法控制它,

上面的readonly-fix对我有用.

Answer 5

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

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

这对我在Chrome v48上有用,看起来是合法的标记:

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

Answer 6

试试这个.我知道这个问题有些陈旧,但对于这个问题,这是一种不同的方法.

我也注意到这个问题就在这个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="" />

希望它会帮助某人.

Answer 7

我不知道为什么,但这对我有帮助和帮助.

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

我不知道为什么,但autocompelete ="new-password"禁用自动填充.它工作在最新的49.0.2623.112铬版本.

Answer 8

对我来说,简单

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

做到了.

测试了多个版本,最后一次尝试是在56.0.2924.87上

Answer 9

您必须添加此属性:

autocomplete="new-password"

来源链接:全文

Answer 10

以下是我提出的解决方案,因为谷歌坚持要覆盖人们似乎做出的每一项解决方案.

选项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 - 将电子邮件值设置为空格,然后将其删除

假设您有两个输入,例如电子邮件和密码,请将电子邮件字段的值设置为" "(空格)并添加属性/值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注释,以便其他开发人员不删除它!还要确保隐藏输入的名称是相关的.

Answer 11

它是如此简单和棘手:)

谷歌浏览器基本搜索每一个可见密码元素里面<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;"/>
   

Answer 12

在某些情况下,即使autocomplete属性设置为off,浏览器也会继续建议自动完成值.对于开发人员来说,这种意想不到的行为非常令人费解 真正强制非自动完成的技巧是为属性分配一个随机字符串,例如:

autocomplete="nope"

Answer 13

我发现将其添加到表单会阻止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已经确定它比开发者更了解何时自动完成.有一个真正的微软感觉.

Answer 14

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

将readonly属性添加到标记以及删除它的onfocus事件可以解决问题

Answer 15

对于用户名密码组合,这是一个很容易解决的问题.Chrome启发式查找模式:

<input type="text">

其次是:

<input type="password">

简单地通过使此无效来打破此过程:

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

Answer 16

Mike Nelsons提供的解决方案在Chrome 50.0.2661.102 m中对我无效.只需使用display:none set添加相同类型的输入元素,就不再禁用本机浏览器自动完成.现在需要复制要禁用自动完成的输入字段的name属性.

此外,为避免输入字段在表单元素中重复,您应该在未显示的元素上放置禁用.这将阻止该元素作为表单操作的一部分提交.

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

Answer 17

使用css text-security:disc而不使用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;
}

Answer 18

在2016年,谷歌Chrome开始忽略,autocomplete=off尽管它在W3C中.他们发布的答案:

这里棘手的部分是,在网络自动完成=关闭的某个地方,某些地方成为许多表单字段的默认设置,没有任何真实的想法是否对用户有益.这并不意味着没有非常有效的情况,您不希望浏览器自动填充数据(例如在CRM系统上),但总的来说,我们将这些视为少数情况.因此,我们开始忽略Chrome自动填充数据的autocomplete = off.

基本上说:我们更清楚用户想要什么.

当需要autocomplete = off时,他们打开另一个bug来发布有效的用例

我没有在我的所有B2B应用程序中看到与自动完成相关的问题,但只输入了密码类型.

如果屏幕上有任何密码字段,即使是隐藏密码字段,也会自动填充.要打破这个逻辑,你可以将每个密码字段放入它自己的表单中,如果它没有破坏你自己的页面逻辑.

<input type=name >

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

Answer 19

如果您在保留占位符但禁用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/

Answer 20

好吧,既然我们都有这个问题,我花了一些时间为这个问题编写一个有效的jQuery扩展.谷歌必须遵循HTML标记,而不是我们关注谷歌

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

Answer 21

这有两件事.Chrome和其他浏览器会记住以前输入的字段名称值,并根据该值向用户提供自动填充列表(特别是,密码类型输入永远不会以这种方式记住,原因相当明显).您可以添加autocomplete="off"以防止在您的电子邮件字段之类的内容.

但是,您有密码填充程序.大多数浏览器都有自己的内置实现,并且还有许多提供此功能的第三方实用程序.这个,你无法阻止.这是用户自己选择保存此信息以便以后自动填写,并且完全超出了应用程序的范围和影响范围.

Answer 22

我真的不喜欢制作隐藏的字段,我认为制作它会让它变得非常混乱.

在您要从自动完成停止的输入字段上,这将起作用.使字段只读并在焦点上删除该属性

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

这样做的第一步是你必须通过选择字段来删除只读属性,那时你很可能会填充你自己的用户输入并弯下自动填充来接管

Answer 23

之前输入的由chrome缓存的值显示为下拉列表选择列表.可以通过autocomplete = off禁用此功能,在chrome的高级设置中显式保存的地址会在地址字段获得焦点时自动填充弹出窗口.这可以通过autocomplete ="false"禁用.但它允许chrome在下拉列表中显示缓存值.

在输入html字段后面将关闭两个.

Role="presentation" & autocomplete="off"

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

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

Chrome还会在label元素上考虑"for"属性.它可以用来打破chrome的解析序列.

Answer 24

通过设置autocomplete到off要在这里工作我这是在搜索页面中使用由谷歌的例子.我从inspect元素中找到了这个.

编辑:如果off不工作然后尝试false或nofill.在我的情况下,它使用chrome版本48.0

Answer 25

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

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

Answer 26

这是一个肮脏的黑客 -

你在这里有你的元素(添加disabled属性):

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

然后在您的网页底部放置一些JavaScript:

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

Answer 27

根据Chromium bug报告#352347 Chrome不再尊重autocomplete="off|false|anythingelse",无论是在表单上还是在输入上.

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

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

Answer 28

不同的解决方案,基于webkit.如前所述,只要Chrome找到密码字段,它就会自动填充电子邮件.AFAIK,这与autocomplete = [无论如何]无关.

为了避免这种情况,请将输入类型更改为文本,并以您想要的任何形式应用webkit安全性字体.

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

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

从我可以看到,这至少与输入类型=密码一样安全,它的复制和粘贴安全.然而,通过删除将删除星号的样式很容易,当然输入类型=密码可以很容易地更改为控制台中的输入类型=文本以显示任何自动填充的密码,所以它实际上是相同的.

Answer 29

我终于找到了成功使用textarea. 对于密码字段，有一个事件处理程序，可以用“•”替换每个键入的字符。