停用Chrome自动填充功能-Java 学习之路

620

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

表单中的字段都具有非常常见且准确的名称，例如"email"，"name"或"password"，并且它们也具有 autocomplete="off" 集 .

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

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

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

30 回答

6
您必须添加此属性：
```
autocomplete="new-password"
```
来源链接：Full Article
回复于 2024-04-25T14:19:32+08:00
37
如果要实现搜索框功能，请尝试将 type 属性设置为 search ，如下所示：
```
<input type="search" autocomplete="off" />
```
这对我在Chrome v48上有用，看起来是合法的标记：

https://www.w3.org/wiki/HTML/Elements/input/search
回复于 2024-04-25T14:19:32+08:00
17
试试这个 . 我知道这个问题有些陈旧，但对于这个问题，这是一种不同的方法 .

我也注意到问题出现在 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="" />
```
希望它会帮助某人 .
回复于 2024-04-25T14:19:32+08:00
5
我不知道为什么，但这对我有帮助和帮助 .
```
<input type="password" name="pwd" autocomplete="new-password">
```
我不知道为什么，但 autocompelete="new-password" 禁用自动填充 . 它工作在最新的 49.0.2623.112 chrome版本 .
回复于 2024-04-25T14:19:32+08:00
61
对我来说，简单
```
<form autocomplete="off" role="presentation">
```
做到了 .

测试了多个版本，最后一次尝试是在56.0.2924.87上
回复于 2024-04-25T14:19:32+08:00
4

对于新的Chrome版本，您只需将 autocomplete="new-password" 放在密码字段中并且's it. I'已经检查过它，工作正常 .

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

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

回复于 2024-04-25T14:19:32+08:00
78
我刚刚发现，如果您有一个记住的网站用户名和密码，当前版本的Chrome会在任何 type=password 字段之前将您的用户名/电子邮件地址自动填充到该字段中 . 它并不关心字段的调用 - 只需在密码成为您的用户名之前假设该字段 .

Old Solution

只需使用 <form autocomplete="off"> ，它可以防止密码预填充以及基于浏览器可能做出的假设（通常是错误的）的任何类型的启发式字段填充 . 与使用 <input autocomplete="off"> 相反，密码自动填充似乎几乎忽略了它（在Chrome中，Firefox确实遵守它） .

Updated Solution

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

只需创建几个字段并使用“display：none”隐藏它们 . 例：
```

<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
```
然后把你的真实字段放在下面 .

记得在你的团队中添加评论或其他人会想知道你在做什么！

Update March 2016

刚刚测试了最新的Chrome - 一切都很好 . 现在这是一个相当古老的答案，但我想提一下，我们的团队已经在数十个项目中使用它多年了 . 尽管下面有一些评论，它仍然很好用 . 可访问性没有问题，因为字段是 display:none ，这意味着它们无法获得焦点 . 正如我所提到的，你需要把它们放在真实领域之前 .

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

使用jQuery的示例代码（假设您给假字段一个类）：
```
$(".fake-autofill-fields").show();
        // some DOM manipulation/ajax here
        window.setTimeout(function () {
            $(".fake-autofill-fields").hide();
        },1);
```
Update July 2018

我的解决方案不再适用，因为Chrome的反可用性专家一直在努力工作 . 但他们以下列形式向我们扔了一块骨头：
```
<input type="password" name="whatever" autocomplete="new-password" />
```
这有效并且主要解决了这个问题 .

但是，如果您没有密码字段但只有电子邮件地址，则它不起作用 . 这也可能很难让它停止黄色和预先填充 . 伪字段解决方案可用于解决此问题 .

事实上，你有时需要投入两个假场，并在不同的地方尝试 . 例如，我在表单开头已经有假字段，但Chrome最近再次开始预先填写我的“电子邮件”字段 - 然后我在“电子邮件”字段之前加倍填写更多假字段，然后修复它 . 删除第一个或第二个字段将恢复为不正确的过度自动填充 .
回复于 2024-04-25T14:19:32+08:00
213

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

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

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

回复于 2024-04-25T14:19:32+08:00
7
有时甚至 autocomplete=off 也不会阻止将凭据填入错误的字段 .

解决方法是使用readonly-mode禁用浏览器自动填充并在焦点上设置可写：
```
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
```
focus 事件发生在鼠标单击和Tabing through字段时 .

更新：

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

Explanation: 浏览器自动将凭据填写到错误的文本字段？

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

当有相同形式的密码字段时，有时我会在Chrome和Safari上发现这种奇怪的行为 . 我猜，浏览器会查找密码字段以插入您保存的凭据 . 然后它在DOM中 autofills username into the nearest textlike-input field , that appears prior the password field （仅因为观察而猜测） . 作为浏览器是最后一个实例，你无法控制它，

上面的readonly-fix对我有用 .
回复于 2024-04-25T14:19:32+08:00
7
它是如此简单和棘手:)

google chrome基本上在 <form> ， <body> 和 <iframe> 标签内搜索 every first visible password element 以启用它们的自动重新填充，因此要禁用此功能，您需要添加一个虚拟密码元素，如下所示：
- 如果 <form> 标签内的密码元素需要在 <form> 打开标签后立即将虚拟元素作为表单中的第一个元素
- 如果您的密码元素不在 <form> 标记内，则在 <body> 打开标记后立即将虚拟元素作为html页面中的第一个元素
- 你需要隐藏虚拟元素而不使用css display:none 所以基本上使用以下作为虚拟密码元素 .
```
<input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
```
回复于 2024-04-25T14:19:32+08:00
6
以下是我提出的解决方案，因为谷歌坚持要覆盖人们似乎所做的每一项工作 .

选项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曾经搞过 Value 观 . 那太疯狂了 . 所以希望这是一个安全的解决方案 .

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

假设您有两个输入，例如电子邮件和密码，请将电子邮件字段的值设置为 " " （空格）并添加属性/值 autocomplete="off" ，然后使用JavaScript清除它 . You can leave the password value empty.

如果用户由于某种原因没有JavaScript，请确保您修改他们的输入服务器端（您可能应该是这样），以防他们不删除空间 .

这是jQuery：
```
$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});
```
我将超时设置为 15 因为 5 似乎偶尔在我的测试中工作，因此这个数字的重叠似乎是一个安全的赌注 .

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

选项3 - 隐藏的输入

把它放在表格的开头：
```

<input name="email" class="hide">
```
CSS：
```
.hide{ display:none; }
```
确保保留HTML注释，以便其他开发人员不删除它！还要确保隐藏输入的名称是相关的 .
回复于 2024-04-25T14:19:32+08:00
517
我发现将其添加到表单会阻止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已经确定它比开发人员更了解何时自动完成 . 有一个真正的微软感觉 .
回复于 2024-04-25T14:19:32+08:00
4
```
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
```
将readonly属性添加到标记以及删除它的onfocus事件可以解决问题
回复于 2024-04-25T14:19:32+08:00
12
在某些情况下，即使autocomplete属性设置为off，浏览器也会继续建议自动完成值 . 对于开发人员来说，这种意想不到的行为非常令人费解真正强制非自动完成的技巧是 to assign a random string to the attribute ，例如：
```
autocomplete="nope"
```
回复于 2024-04-25T14:19:32+08:00

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

回复于 2024-04-25T14:19:32+08:00

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

Problem

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将不会获取标记 .

Solution

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/

回复于 2024-04-25T14:19:32+08:00

21
对于用户名密码组合，这是一个很容易解决的问题 . Chrome启发式查找模式：
```
<input type="text">
```
其次是：
```
<input type="password">
```
简单地通过使此无效来打破此过程：
```
<input type="text">
<input type="text" onfocus="this.type='password'">
```
回复于 2024-04-25T14:19:32+08:00
629
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">
```
回复于 2024-04-25T14:19:32+08:00
4

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

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

回复于 2024-04-25T14:19:32+08:00
5
我真的不喜欢制作隐藏的字段，我认为制作它会让它变得非常混乱 .

在您要从自动完成停止的输入字段上，这将起作用 . 使字段只读并在焦点上删除该属性，如下所示
```
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
```
这样做的首先是你必须通过选择字段来删除 read only attribute ，那时你最有可能填充你自己的用户输入并弯腰 autofill 来接管
回复于 2024-04-25T14:19:32+08:00
18

通过将 autocomplete 设置为 off 应该在这里工作我有一个例子，谷歌在搜索页面中使用 . 我从inspect元素中找到了这个 .

edit ：如果 off 无效，请尝试 false 或 nofill . 在我的情况下，它使用chrome版本48.0

回复于 2024-04-25T14:19:32+08:00

这是一个肮脏的黑客 -

这里有你的元素（添加disabled属性）：

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

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

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

回复于 2024-04-25T14:19:32+08:00

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

对我有用的唯一解决方案是 add a dummy password field ：
```
<input type="password" class="hidden" />
<input type="password" />
```
回复于 2024-04-25T14:19:32+08:00
5
不同的解决方案，基于webkit . 如前所述，只要Chrome找到密码字段，它就会自动填充电子邮件 . AFAIK，这与autocomplete = [无论如何]无关 .

为了避免这种情况，请将输入类型更改为文本，并以您想要的任何形式应用webkit安全性字体 .
```
.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">
```
从我可以看到，这至少与输入类型=密码一样安全，它的复制和粘贴安全 . 然而，通过删除将删除星号的样式很容易，当然输入类型=密码可以很容易地更改为控制台中的输入类型=文本以显示任何自动填充的密码，所以它实际上是相同的 .
回复于 2024-04-25T14:19:32+08:00

好吧，因为我们都有这个问题，我花了一些时间为这个问题编写一个有效的jQuery扩展 . Google has to follow html markup, not we follow 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 with tests

回复于 2024-04-25T14:19:32+08:00

尝试以下适用于我的 jQuery 代码 .

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

回复于 2024-04-25T14:19:32+08:00

对我有用的唯一方法是:(需要jQuery）

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

回复于 2024-04-25T14:19:32+08:00

我遇到了同样的问题 . 以下是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">

回复于 2024-04-25T14:19:32+08:00

7

而不是"this is what worked for me"答案和其他看起来像完全黑客的答案......这是目前chrome（和最新规范）将如何处理 input 元素上的 autocomplete 属性：

https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=en

TLDR：在输入上添加 autocomplete='<value>' ，其中 <value> 应该是定义字段用途的任何字符串 . 这与 name 属性的工作方式类似 . 尽可能使用上面链接中的建议值 .

另外，从表单中删除自动填充属性

回复于 2024-04-25T14:19:32+08:00
4

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

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

Role="presentation" & autocomplete="off"

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

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

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

回复于 2024-04-25T14:19:32+08:00

停用Chrome自动填充功能

30 回答

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

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

选项3 - 隐藏的输入

相关问题