现代方法

Question

我创建了一个使用标记框下拉列表的Web应用程序。这适用于除Chrome浏览器（版本21.0.1180.89）以外的所有浏览器。

尽管input字段和form字段都具有autocomplete="off"属性，但Chrome仍然会显示该字段以前条目的下拉历史记录，这会删除标记框列表

Answer 1

<强>更新

现在看来，Chrome会忽略style="display: none;"或style="visibility: hidden;属性。

您可以将其更改为：

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

根据我的经验，Chrome只会自动填充第一个<input type="password">和之前的<input>。所以我补充道：

<input style="display:none">
<input type="password" style="display:none">

在<form>的顶部，案件已经解决。

Answer 2

Chrome似乎忽略了autocomplete="off"，除非它位于<form autocomplete="off">标记上。

Answer 3

要获得可靠的解决方法，您可以将此代码添加到布局页面中：

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

只有当表单中至少有一个其他输入元素包含任何其他自动填充值时，Chrome才会尊重autocomplete = off。

这不适用于密码字段 - Chrome中的处理方式非常不同。有关详细信息，请参阅https://code.google.com/p/chromium/issues/detail?id=468153。

更新：Chromium团队于2016年3月11日关闭了“无法修复”错误。请参阅my originally filed bug report中的最后评论，以获取完整说明。 TL; DR：使用语义自动填充属性，例如autocomplete =“new-street-address”，以避免Chrome执行自动填充。

Answer 4

现代方法

只需输入您的输入readonly，然后在焦点上将其删除即可。这是一种非常简单的方法，浏览器不会填充readonly输入。因此，此方法已被接受，并且永远不会被未来的浏览器更新覆盖。

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

下一部分是可选的。相应地设置输入样式，使其看起来不像readonly输入。

input[readonly] {
     cursor: text;
     background-color: #fff;
}

WORKING EXAMPLE

Answer 5

Chrome版本34现在忽略了autocomplete=off， see this

Lots of discussion关于这是好事还是坏事？您的意见是什么？

Answer 6

嗯，派对有点晚了，但似乎对autocomplete应该和不应该如何工作存在一些误解。根据HTML规范，用户代理（在本例中为Chrome）可以覆盖autocomplete：

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

用户代理可以允许用户覆盖元素的自动填充字段名称，例如，将其改为＆＃34; off＆＃34;到＆＃34; on＆＃34;尽管页面作者的反对意见允许记住和预先填写值，或者总是＆＃34; off＆＃34;永远不记住值。但是，用户代理不应允许用户轻易地覆盖＆＃34; off＆＃34;的自动填充字段名称。到＆＃34; on＆＃34;或其他值，因为如果始终记住所有值，则会对用户产生重大的安全隐患，无论网站的首选项如何。

因此，对于Chrome，开发人员基本上已经说过了＃34;我们会将此留给用户，以决定他们是否希望autocomplete工作。如果您不想要它，请不要在浏览器中启用它＆＃34;。

然而，看来这对我的喜好有点过于热心，但事实就是如此。该规范还讨论了此举的潜在安全隐患：

＆＃34; off＆＃34; keyword表示控件的输入数据特别敏感（例如核武器的激活码）;或者它是一个永远不会被重用的值（例如银行登录的一次性密钥），因此用户每次都必须明确输入数据，而不是依靠UA预先填写他的价值;或者文档提供了自己的自动完成机制，并且不希望用户代理提供自动完成值。

因此，在经历了与其他人一样的挫折之后，我找到了适合我的解决方案。它与autocomplete="false"答案类似。

Mozilla的一篇文章确切地说明了这个问题：

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

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

以下代码应该工作：

autocomplete="nope"

以下各项应如此：

autocomplete="false"
autocomplete="foo"
autocomplete="bar"

我看到的问题是浏览器代理可能足够聪明，可以学习autocomplete属性并在下次看到表单时应用它。如果它确实这样做，我仍然可以看到仍然解决问题的唯一方法是在生成页面时动态更改autocomplete属性值。

值得一提的是，许多浏览器会忽略登录字段的autocomplete设置（用户名和密码）。正如Mozilla的文章所述：

出于这个原因，许多现代浏览器不支持autocomplete =＆＃34; off＆＃34;用于登录字段。


如果网站设置了autocomplete =＆＃34; off＆＃34;对于表单，表单包含用户名和密码输入字段，然后浏览器仍然会提供记住此登录信息，如果用户同意，浏览器将在下次用户访问此页面时自动填充这些字段。

如果网站设置了autocomplete =＆＃34; off＆＃34;对于用户名和密码输入字段，浏览器仍然会提供记住此登录信息，如果用户同意，浏览器将在下次用户访问此页面时自动填充这些字段。


这是Firefox（自版本38以来），Google Chrome（自34版本）和Internet Explorer（自版本11以来）以来的行为。

最后了解该属性是属于form元素还是属于input元素的一些信息。该规范再次得到答案：

如果省略autocomplete属性，则使用与元素表单所有者自动完成属性的状态对应的默认值（＆＃34; on＆＃34;或＆＃34;断＆＃34）。如果没有表单所有者，那么值＆＃34; on＆＃34;使用。

因此。将其放在表单上应该适用于所有输入字段。将它放在单个元素上应该仅适用于该元素（即使表单上没有元素）。如果autocomplete根本没有设置，则默认为on。

<强>摘要

要在整个表单上停用autocomplete：

<form autocomplete="off" ...>

或者，如果你动态地需要这样做：

<form autocomplete="random-string" ...>

禁用单个元素上的autocomplete（无论表单设置是否存在）

<input autocomplete="off" ...>

或者，如果你动态地需要这样做：

<input autocomplete="random-string" ...>

请记住，某些用户代理甚至可以覆盖最难以禁用autocomplete的尝试。

Answer 7

浏览器不关心autocomplete = off auto或甚至将凭据填充到错误的文本字段？

我通过将密码字段设置为只读并激活它来修复它，当用户点击它或使用tab键到此字段时。

修复浏览器自动填充：readonly并将焦点设置为焦点（点击鼠标并在字段中进行制表）

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

更新： Mobile Safari将光标设置在字段中，但不显示虚拟键盘。 New Fix像以前一样工作，但处理虚拟键盘：

<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中的密码字段之前（仅因为观察而猜测）。由于浏览器是最后一个实例而您无法控制它，有时甚至autocomplete = off也不会阻止将凭据填入错误的字段，而不会阻止用户或昵称字段。

Answer 8

您可以使用autocomplete="new-password"

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

适用于：

Chrome：53,54,55
Firefox：48,49,50

Answer 9

对于那些正在寻找解决方案的人来说，我终于明白了。

如果网页是HTML5网页（我使用的是XHTML），Chrome只会遵守autocomplete =“off”。

我将页面转换为HTML5，问题消失了（facepalm）。

Answer 10

Autocomplete="Off"不再起作用。

尝试仅使用随机字符串代替"Off"，例如Autocomplete="NoAutocomplete"

希望对您有帮助。

Answer 11

看见chrome忽略autocomplete="off"，我用愚蠢的方式解决它，使用＆＃34;假输入＆＃34;欺骗铬来填补它，而不是填补＆＃34;真正的＆＃34;之一。

示例：

<input type="text" name="username" style="display:none" value="fake input" /> <input type="text" name="username" value="real input"/>

Chrome会填充＆＃34;虚假输入＆＃34;，并且在提交时，服务器将采用＆＃34;真实输入＆＃34;值。

Answer 12

我发布此答案是为此问题提供更新的解决方案。我目前正在使用Chrome 49，但没有给出这个答案。我也在寻找与其他浏览器和以前版本一起使用的解决方案。

将此代码放在表单的开头

<div style="display: none;">
    <input type="text" autocomplete="new-password">
    <input type="password" autocomplete="new-password">
</div>

然后，对于您的真实密码字段，请使用

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

如果此问题不再有效，或者您遇到其他浏览器或版本的问题，请评论此答案。

批准：

Chrome：49
Firefox：44,45
边缘：25
Internet Explorer：11

Answer 13

TL; DR：告诉Chrome这是一个新的密码输入，并且它不会将旧密码作为自动填充建议提供：

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

由于设计决策，

autocomplete="off"不起作用 - 许多研究表明，如果用户可以将密码存储在浏览器或密码管理器中，则用户需要更长时间，更难以破解密码。

autocomplete has changed的规范，现在支持各种值，使登录表单易于自动完成：

<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">

<!-- current-password will populate for the matched username input  -->
<input type="password" autocomplete="current-password" />

如果您不提供这些Chrome仍然会尝试猜测，那么它会忽略autocomplete="off"。

解决方案是密码重置表单也存在autocomplete值：

<label>Enter your old password:
    <input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
    <input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
    <input type="password" autocomplete="new-password" name="pass-repeat" />
</label>

您可以使用此autocomplete="new-password"标记告诉Chrome不要猜测密码，即使密码已存储在此网站上。

Chrome还可以使用credentials API直接管理网站的密码，这是一个标准，最终可能会获得普遍支持。

Answer 14

直到上周，以下两个解决方案似乎适用于Chrome，IE和Firefox。但随着Chrome版本48（仍然是49版）的发布，它们不再有效：

表格顶部的以下内容：

<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>

密码输入元素中的以下内容：

自动填充= “关闭”

因此，为了快速解决这个问题，首先我尝试使用一个主要的hack来初始设置密码输入元素为禁用，然后在文档就绪函数中使用setTimeout再次启用它。

setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);

但这看起来很疯狂，我做了一些搜索，并在Disabling Chrome Autofill找到了@tibalts的回答。他的答案是在密码输入中使用autocomplete =“new-password”，这似乎适用于所有浏览器（我在此阶段保留了我的修正号1）。

以下是Google Chrome开发人员讨论中的链接： https://code.google.com/p/chromium/issues/detail?id=370363#c7

Answer 15

取代 autocomplete =“off”使用 autocomplete =“false”;）

来自：https://stackoverflow.com/a/29582380/75799

Answer 16

我通过使用随机字符解决了与Google Chrome的无休止的战斗。当您始终使用随机字符串呈现自动完成功能时，它将永远不会记住任何东西。

<input name="name" type="text" autocomplete="rutjfkde">

希望对其他人有帮助。

Answer 17

在现代浏览器中，

autocomplete=off在很大程度上被忽略了 - 主要是由于密码管理器等。

您可以尝试添加此autocomplete="new-password"并非所有浏览器都完全支持它，但它适用于某些

Answer 18

从Chrome 42开始，此线程中没有任何解决方案/黑客（自2015-05-21T12:50:23+00:00起）可用于禁用单个字段或整个表单的自动完成功能。

编辑：我发现您实际上只需要在表单中插入一个虚拟电子邮件字段（您可以使用display: none隐藏它），然后再阻止自动填充。我认为chrome会在每个自动填充字段中存储某种形式的签名，并且包括另一个电子邮件字段会破坏此签名并阻止自动完成。

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

好消息是，由于“表单签名”已被破坏，因此没有任何字段是自动填充的，因此在提交之前不需要JS来清除假字段。

旧答案：

我发现唯一可行的是在真实字段之前插入两个类型为电子邮件和密码的虚拟字段。您可以将它们设置为display: none以隐藏它们（忽略这些字段并不够智能）：

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="password" name="fake_password" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

不幸的是，这些字段必须在您的表单中（否则两组输入都是自动填充的）。因此，为了真正忽略虚假字段，您需要在表单提交上运行一些JS来清除它们：

form.addEventListener('submit', function() {
    form.elements['fake_email'].value = '';
    form.elements['fake_password'].value = '';
});

请注意，使用Javascript清除值可以覆盖自动完成。因此，如果在禁用JS的情况下失去正确的行为是可以接受的，那么您可以使用针对Chrome的JS自动完成“polyfill”来简化所有这些：

(function(document) {

    function polyfillAutocomplete(nodes) {

        for(var i = 0, length = nodes.length; i < length; i++) {

            if(nodes[i].getAttribute('autocomplete') === 'off') {

                nodes[i].value = '';
            }
        }
    }

    setTimeout(function() {

        polyfillAutocomplete(document.getElementsByTagName('input'));
        polyfillAutocomplete(document.getElementsByTagName('textarea'));

    }, 1);

})(window.document);

Answer 19

<块引用>

[2021 年适用于 Chrome（v88、89、90）、Firefox、Brave、Safari]

这里已经写的旧答案可以反复试验，但大多数他们没有链接到任何官方文档或 Chrome 对此的看法很重要。

问题中提到的问题是因为 Chrome 的自动填充功能，这里是 Chrome 在此错误链接中对此的立场 - https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164

简单来说，有两种情况-

[CASE 1]：您的 input 类型不是 password。在这种情况下，解决方案很简单，分为三个步骤。
- 将 name 属性添加到 input
- name 不应以电子邮件或用户名等值开头，否则 Chrome 最终仍会显示下拉列表。例如，name="emailToDelete" 显示下拉菜单，但 name="to-delete-email" 不显示。同样适用于 autocomplete 属性。
- 添加autocomplete属性，并添加一个对您有意义的值，例如new-field-name
它看起来像这样，您将在余生中再也看不到此输入的自动填充 -
```
<input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
```
[案例 2]：input type 是 password
- 好吧，在这种情况下，无论您尝试过多少次，Chrome 都会向您显示用于管理密码/使用现有密码的下拉菜单。 Firefox 也会做类似的事情，所有其他主要浏览器也是如此。 [1]
- 在这种情况下，如果您真的想阻止用户查看管理密码的下拉菜单/查看安全生成的密码，您将不得不使用 JS 来切换输入类型，如本文的其他答案中所述问题。

[1] 关于关闭自动补全的详细 MDN 文档 - https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Answer 20

在尝试了所有解决方案之后，这里似乎适用于chrome版本：45，表单有密码字段：

 jQuery('document').ready(function(){
        //For disabling Chrome Autocomplete
        jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000));
 });

Answer 21

将输入类型属性更改为type="search"。

Google不会将自动填充应用于具有搜索类型的输入。

Answer 22

我刚刚更新为 Chrome 49 ，而Diogo Cid's solution已不再有效。

我在加载页面后，在运行时隐藏和删除字段时做了不同的解决方法。

Chrome现在忽略了将凭据应用于第一个显示的 type="password"字段及其之前的type="text"字段的原始解决方法，因此我使用 CSS隐藏了这两个字段 visibility: hidden;

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

我知道它可能看起来不是很优雅但它有效。

Answer 23

在Chrome 48+中使用此解决方案：

在真实字段之前放置假字段：

<form autocomplete="off">
  <input name="fake_email"    class="visually-hidden" type="text">
  <input name="fake_password" class="visually-hidden" type="password">

  <input autocomplete="off" name="email"    type="text">
  <input autocomplete="off" name="password" type="password">
</form>

隐藏虚假字段：

.visually-hidden {
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

你做到了！

这也适用于旧版本。

Answer 24

在Chrome v.34之后，在autocomplete="off"代码处设置<form>无法正常工作

我做了修改以避免这种烦人的行为：

删除密码输入的name和id
在输入中放置一个类（例如：passwordInput）

（到目前为止，Chrome不会将保存的密码放在输入中，但表单现在已损坏）

最后，要使表单正常工作，请在用户单击“提交”按钮时或在您希望触发表单提交时运行此代码：

var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");

在我的情况下，我曾经在密码输入中使用id="password" name="password"，所以我在触发子目标之前将它们放回去。

Answer 25

我设法利用此规则禁用了自动补全功能：

不是密码但应掩盖的字段，例如信用卡号，也可能具有type =“ password”属性，但应该包含相关的自动填充属性，例如“ cc-number”或 “ cc-csc”。 https://www.chromium.org/developers/design-documents/create-amazing-password-forms

<input id="haxed" type="password" autocomplete="cc-number">

但是，它伴随着巨大的责任：）

不要试图欺骗浏览器的密码管理器（两者都内置在浏览器或外部浏览器）旨在简化用户体验。使用不正确的自动完成属性插入假字段，或利用现有密码管理器的弱点只会导致沮丧的用户。

Answer 26

autocomplete="off"通常可以正常运行，但并非总是如此。它取决于输入字段的name。诸如“地址”，“电子邮件”，“名称”之类的名称将自动完成（浏览器认为它们可以帮助用户），而诸如“代码”，“别针”之类的字段将不会自动完成（如果设置了autocomplete="off"）

我的问题是-自动填充功能与Google address helper混乱了

我通过重命名对其进行了修复

来自

<input type="text" name="address" autocomplete="off">

到

<input type="text" name="the_address" autocomplete="off">

经过chrome 71测试。

Answer 27

我发现这个解决方案是最合适的：

function clearChromeAutocomplete()
{
// not possible, let's try: 
if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) 
{
document.getElementById('adminForm').setAttribute('autocomplete', 'off'); 
setTimeout(function () {
        document.getElementById('adminForm').setAttribute('autocomplete', 'on'); 
}, 1500);
}
}

必须在dom准备好后或表单渲染后加载。

Answer 28

写2020年答案，以防万一。我在上面尝试了多种组合，尽管在我的案例中遗漏了一把钥匙。即使我将autocomplete =“ nope”保留为随机字符串，但它对我也不起作用，因为我具有 name 属性 missing ！

所以我保留了name ='password' 和autocomplete =“新密码”

对于用户名，我保留name =“ usrid” //不要保留包含“用户”的字符串

and autocomplete =“ new-password” //也是如此，因此google不再建议输入密码（管理密码下拉菜单）

这对我来说非常有效。（我是针对Cordova / ionic使用的Android和iOS Web视图执行的操作）

<ion-input [type]="passwordType" name="password" class="input-form-placeholder" formControlName="model_password"
        autocomplete="new-password" [clearInput]="showClearInputIconForPassword">
</ion-input>

Answer 29

某些结束202更新。我尝试了来自不同站点的所有旧解决方案。他们都没有工作！ :-(
然后我发现了：
使用

<input type="search"/>

自动完成功能消失了！

使用Chrome 86，FireFox，Edge 87成功。

Answer 30

虽然我同意自动填充应该是用户选择，但有时Chrome会过度热衷（其他浏览器也可能）。例如，具有不同名称的密码字段仍然使用保存的密码自动填充，并且前一个字段填充了用户名。当表单是Web应用程序的用户管理表单而您不希望自动填充使用您自己的凭据填充表单时，这尤其糟糕。

Chrome完全忽略了自动完成=＆＃34;关闭＆＃34;现在。虽然JS黑客可能很好用，但我发现了一种在撰写本文时起作用的简单方法：

将密码字段的值设置为控制字符8（PHP中为"\x08"或HTML中为）。这会停止Chrome自动填充字段，因为它有一个值，但没有输入实际值，因为这是退格字符。

是的，这仍然是一个黑客，但它适用于我。 YMMV。

Answer 31

我用另一种方式解决了。你可以试试这个。

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

Answer 32

我有一个类似的问题，输入字段带有名称或电子邮件。我设置了autocomplete =“off”，但Chrome仍然强制建议。事实证明这是因为占位符文本中有“name”和“email”字样。

例如

<input type="text" placeholder="name or email" autocomplete="off" />

我通过在占位符中的单词中放置零宽度空间来解决它。不再有Chrome自动填充功能。

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />

Answer 33

2021 年答案： 可悲的是，唯一有效的东西是令人作呕的。我的解决方案是在生成前端标记时在 name 属性的末尾添加一个动态生成的随机数（例如

然后您需要在服务器端添加一些东西来清理传入的 post 请求。例如，在 NodeJS / Express 中，我放入了一个中间件，并使用了一些正则表达式来从接收到的 post 请求中删除数字段。我的看起来像这样，但我想其他语言也会有类似的东西：

const cleanseAutosuggest = function (req, res, next) {
   for (const key in req.body) {
      if (key.match(/-\d+/)) {
         req.body[key.replace(/-\d+/, "")] = req.body[key];
         delete req.body[key];
      }
   }
   next();
};

app.post("/submit", cleanseAutosuggest, function (req, res, next) {
...
})

Answer 34

2020 年 3 月

我正面临这个问题，不幸的是，没有一个解决方案对我有用。所以我应用了运行良好的小技巧。

<input autocomplete="off" type="password" name="password" id="password" readonly="readonly">

$('#password').on('click', function (event) {
  $('#password').removeAttr('readonly');
  $('#password').focus();
});

$('#password').on('blur', function (event) {
  $('#password').attr('readonly', 'readonly');
});

当您单击密码输入字段时，它开始显示建议，但是当触发对输入字段的关注时，它不会显示建议，所以我就是这样解决我的问题的。

希望对大家有所帮助。

Answer 35

看起来这是固定的！见https://codereview.chromium.org/1473733008

Answer 36

使用jQuery UI's Autocomplete之类的小部件时，请务必检查它是否未将自动完成属性添加/更改为关闭。我在使用它时发现这是真的，并且会破坏你为覆盖任何浏览器字段缓存所做的任何工作。确保您具有唯一的名称属性，并在窗口小部件初始化后强制使用唯一的自动填充属性。请参阅下面的一些提示，了解它们如何适用于您的情况。

<?php $autocomplete = 'off_'.time(); ?>
<script>
   $('#email').autocomplete({
      create: function( event, ui ) {
         $(this).attr('autocomplete','<? echo $autocomplete; ?>');
      },
      source: function (request, response) { //your code here },
      focus: function( event, ui ) { //your code here },
      select: function( event, ui ) { //your code here },
   });
</script>
<input type="email" id="email" name="email_<? echo $autocomplete; ?>" autocomplete="<? echo $autocomplete; ?>" />

Answer 37

autocomplete="off"现在可以工作，因此您可以执行以下操作：

<input id="firstName2" name="firstName2" autocomplete="off">

在当前的Chrome 70以及从Chrome 62开始的所有版本中进行了测试。

Demo。

更新：由于在阅读JSFiddle中的演示或实际研究JSFiddle的HTML之前，人们倾向于对此表示反对（例如，参见下面@AntonKuznetsov的注释），我必须清楚地表达它：

顶部input具有自动完成功能
底部的 input通过添加autocomplete="off"

禁用

Answer 38

对我来说，在表单中设置autocomplete =“ off”可以正常使用。但是可以片状。有时会提示输入密码或一些保存的登录名和密码选项。但是不要预先填充。

Chrome版本：81.0.4044.138

CodePen

<form role="form" method="post" action="#" autocomplete="off">
  <label for="login">Login</label><br/>
  <input type="text" name="login" id="login" autocomplete="off" />
  <br/><br/>
  <label for="password">Password</label><br/>
  <input type="password" name="password" autocomplete="off" />
  <br/><br/>
  <input type="submit" name="submit" value="Submit" />
</form>

其他选项：

在提交之前，删除“表单”标签...或将其从“ div”更改为“表单”。
使用javascript和一些contentEditable =“ true”字段可以助您一臂之力...

通常我每隔几个月就要找到另一份工作...

Answer 39

不知道为什么在我的情况下可行，但是在chrome上，我使用了autocomplete="none"，Chrome浏览器停止为我的文本字段建议地址。

Answer 40

Chrome会不断改变处理每个版本的自动完成的方式（我的想法是这样），以使字段变为只读，而onclick / focus使其变为非只读。试试这个jQuery片段。

jQuery(document).ready(function($){
//======fix for autocomplete
$('input, :input').attr('readonly',true);//readonly all inputs on page load, prevent autofilling on pageload

 $('input, :input').on( 'click focus', function(){ //on input click
 $('input, :input').attr('readonly',true);//make other fields readonly
 $( this ).attr('readonly',false);//but make this field Not readonly
 });
//======./fix for autocomplete
});

Answer 41

隐藏的输入元素技巧似乎仍可用（Chrome 43）以防止自动填充，但有一点要记住，Chrome会尝试根据占位符标记自动填充。您需要将隐藏的输入元素的占位符与您尝试禁用的输入匹配。

在我的情况下，我有一个带有“城市或邮编”占位符文字的字段，我正在使用Google Place Autocomplete。它似乎试图自动填充，就好像它是地址表单的一部分。直到我在隐藏元素上放置与真实输入相同的占位符时，技巧才起作用：

<input style="display:none;" type="text" placeholder="City or Zip" />
<input autocomplete="off" type="text" placeholder="City or Zip" />

Answer 42

我找到了另一种解决方案 - 只需用 64 屏蔽 autocomplete="off" 输入中的字符。您还可以通过以下方式将其添加到您的 CSS 规则中：

style="-webkit-text-security: disc;"

主要目标是从元素中去除 [autocomplete="off"] { -webkit-text-security: disc; } 或其他类似类型的属性。

至少，就 type="password" 而言，此解决方案有效...

Answer 43

经过大量的挖掘，我发现当我们删除输入标签上的name和id属性时，Chrome（版本83.0.4103.116）上的自动填充下拉菜单没有显示例如。如下代码

<div>
<span>
  Auto complete off works if name and id attribute is not set on input tag 
  <input type="text"/>
</span>
<span>
  Auto complete will work here since id attribute is set
  <input id="name" type="text"/>
</span>
</div>

Answer 44

基本上，我们可以从 chrome、firefox 或任何类型的浏览器的任何文本框中摆脱自动完成功能。很简单的javascript。

window.onload=function(){                                              
        setTimeout(function(){  
            document.getElementById('username').value = '';
            document.getElementById('password').value = '';
        },100);
    }

当您的窗口完成加载时，100 毫秒后我们的用户名和密码字段值将被删除。我认为这是在所有浏览器（特别是 chrome）上关闭自动完成功能的最佳方式。

Answer 45

不是一个合适的交易，我是为那些寻求最简单解决方案的人发布的。

只需在页面加载时通过 jquery/javascript 重置输入字段。

喜欢：

$(function() {
    setTimeout(function() {
        $("input").val("");
    }, 500);
});

使用 settimeout 因为 chrome 仅在 400 毫秒后填充自动完成值。

Answer 46

我的表单中的搜索字段之一也有类似的问题。 autocomplete= "false"和autocomplete= "off"都没有为我工作。结果表明，当您在input元素中将aria-label属性设置为city或address之类的东西时，chrome会覆盖所有设置并显示自动完成

因此，我要做的解决方法是从aria标签中删除city部分，并提供一个不同的值。最后自动完成功能停止显示

Answer 47

对于此问题，我使用了此CSS解决方案。它对我有用。

this.remove = function (fname, callback) {
    fs.readdir(secret.pathCache, (err, files) => {
        files = files.filter(file => file.includes(fname));
        let len = files.length;
        for(const file of files){
            fs.unlink(secret.pathCache + fname, err => {
                if(--len <= 0){
                    callback();
                }
            });
        }
    });
}

Answer 48

我将此称为大锤方法，但在我尝试过的所有其他方法均失败的情况下，它似乎对我有用：

<input autocomplete="off" data-autocomplete-ninja="true" name="fa" id="fa" />

注意：输入名称和id属性不应包含任何能使浏览器提示数据是什么的内容，否则此解决方案将不起作用。例如，我使用的是“ fa”而不是“ FullAddress”。

以下页面加载脚本（此脚本使用JQuery）：

$("[data-autocomplete-ninja]").each(function () {
    $(this).focus(function () {
        $(this).data("ninja-name", $(this).attr("name")).attr("name", "");
    }).blur(function () {
        $(this).attr("name", $(this).data("ninja-name"));
    });
});

以上解决方案应防止浏览器自动填充从其他表单收集的数据，或从以前在同一表单上提交的数据。

基本上，我将在焦点对准输入时删除name属性。只要您在元素处于焦点状态时不执行任何需要name属性的操作（例如按元素名称使用选择器），则此解决方案应该是无害的。

Answer 49

除了为自动填充提供虚假字段外，没有一个解决方案有效。我制作了一个React组件来解决这个问题。

import React from 'react'

// Google Chrome stubbornly refuses to respect the autocomplete="off" HTML attribute so
// we have to give it a "fake" field for it to autocomplete that never gets "used".

const DontBeEvil = () => (
  <div style={{ display: 'none' }}>
    <input type="text" name="username" />
    <input type="password" name="password" />
  </div>
)

export default DontBeEvil

Answer 50

我正在使用Chrome - 版本64.0.3282.140（官方版本）（64位），并使用以下代码和表单名称，它适用于我。

<form name="formNameHere">....</form>
<script type="text/javascript">
    setTimeout(function(){
        document.formNameHere.reset();
    },500);
</script>

Answer 51

在表单标记后添加：

<form>
<div class="div-form">
<input type="text">
<input type="password" >
</div>

将此添加到您的css文件中：

.div-form{
opacity: 0;
}

Answer 52

我刚刚尝试了以下内容，它似乎在Chrome 53上执行了这一操作 - 它还会在输入密码字段时禁用“使用密码：”下拉列表。

只需将密码输入类型设置为text，然后添加onfocus处理程序（内联或通过jQuery / vanilla JS）将类型设置为password：

onfocus="this.setAttribute('type','password')"

甚至更好：

onfocus="if(this.getAttribute('type')==='text') this.setAttribute('type','password')"

Answer 53

需要使用自动完成='false'，这对Chrome浏览器也有效。使用代码

<ng-form autocomplete="false"> 
.....
</ng-form>

Answer 54

以下是Chrome版本51.0.2704.106对我有用的内容。<input id="user_name" type="text" name="user_name" autocomplete="off" required /> 并与<input id="user_password" type="password" name="user_password" autocomplete="new-password" required />结合使用。我的问题是，在实现new-password之后，它仍然会在user_name字段上显示用户名的下拉。

Answer 55

要防止自动完成，只需将空格设置为输入值：

<input type="text" name="name" value="  ">

Answer 56

对于这个问题，我有一个几乎完美的解决方案：从所有密码输入元素中删除“ type = password”后，将所有密码输入元素都加载到DOM中，请设置超时值以将“ type = password”重新设置。Chrome会忽略自动填充的更改类型。示例：

setTimeout(()=>{ele.type="password"},3000)

或通过事件更改类型：

ele.oninput=function(){ele.type="password"}

Answer 57

我已经提出了以下解决方案，该解决方案使用属性autocomple="off"查询所有字段，然后将其值设置为单个空格，然后将计时器设置为大约200毫秒并将值设置回一个空字符串。

示例：

// hack to prevent auto fill on chrome
var noFill = document.querySelectorAll("input[autocomplete=off]");

noFill.forEach(function(el) {
    el.setAttribute("value", " ");
    setTimeout(function() {
        el.setAttribute("value", "");
    }, 200);
});

我为计时器选择了200毫秒，因为经过一些实验，200毫秒似乎是我的计算机上镀铬放弃尝试自动填充字段所花费的时间。我很高兴听到其他时间似乎对其他人有效。

Chrome会忽略autocomplete =“off”

57 个答案:

现代方法