禁用Chrome自动填充

html HTML

凯梅小胖

2020-03-18

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

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

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

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

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

第2054篇《禁用Chrome自动填充》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共18个回答

小胖Davaid 2020.03.18

我也遇到过同样的问题。这是在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">

西里米亚 2020.03.18

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

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

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

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

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

HarryHarry 2020.03.18

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

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

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

樱Jim西里 2020.03.18

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

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

Role="presentation" & autocomplete="off"

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

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

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

逆天小胖Mandy 2020.03.18

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

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

古一小宇宙 2020.03.18

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

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

米亚伽罗村村 2020.03.18

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

番长A 2020.03.18

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

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

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

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

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

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

<input type=name >

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

番长猿 2020.03.18

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

Harry小卤蛋 2020.03.18

我发现将其添加到表单会阻止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浏览器认为它比开发人员更了解何时自动完成。对微软有一种真正的感觉。

前端LEY 2020.03.18

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

autocomplete="nope"

LEY番长 2020.03.18

这是如此简单和棘手:)

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

- 如果您的密码元素位于<form>标签内，则需要在<form>打开标签后立即将虚拟元素作为表单中的第一个元素
- 如果您的密码元素不在<form>标签内，则在<body>打开标签后立即将虚拟元素作为html页面中的第一个元素
您需要不使用CSS来隐藏虚拟元素，display:none因此基本上将以下内容用作虚拟密码元素。
```
<input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
```

MandyHarry 2020.03.18

您必须添加以下属性：

autocomplete="new-password"

来源链接：全文

达蒙樱梅 2020.03.18

对我来说，简单

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

做到了。

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

猿飞云斯丁 2020.03.18

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

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

我不知道为什么，但是autocompelete =“ new-password”禁用了自动填充。它在最新的49.0.2623.112 chrome版本中有效。

路易Jim 2020.03.18

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

我还注意到问题出在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="" />

希望它会帮助某人。

Tony神乐 2020.03.18

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

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

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

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

小小Pro 2020.03.18

对于新的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名称，则会禁用自动完成。