645

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

尽管input字段和form字段都具有该autocomplete="off"属性，但 Chrome 坚持显示该字段先前条目的下拉历史记录，这会消除标签框列表。

4

65 回答 65

402

防止用户名（或电子邮件）和密码的自动完成：

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

防止自动完成字段（可能不起作用）：

<input type="text" name="field" autocomplete="nope">

解释：

autocomplete<input>尽管有仍然可以工作autocomplete="off"，但是您可以更改off为随机字符串，例如nope.

其他禁用字段自动完成的“解决方案”（这不是正确的方法，但它有效）：

1.

HTML：

<input type="password" id="some_id" autocomplete="new-password">

JS（加载）：

(function() {
    var some_id = document.getElementById('some_id');
    some_id.type = 'text';
    some_id.removeAttribute('autocomplete');
})();

或使用jQuery：

$(document).ready(function() {
    var some_id = $('#some_id');
    some_id.prop('type', 'text');
    some_id.removeAttr('autocomplete');
});

2.

HTML：

<form id="form"></form>

JS（加载）：

(function() {
    var input = document.createElement('INPUT');
    input.type = 'text';
    document.getElementById('form').appendChild(input);
})();

或使用jQuery：

$(document).ready(function() {
    $('<input>', {
        type: 'text'
    }).appendTo($('#form'));
});

使用 jQuery 添加多个字段：

function addField(label) {
  var div = $('<div>');
  var input = $('<input>', {
    type: 'text'
  });
  
  if(label) {
    var label = $('<label>', {
      text: label
    });
    
    label.append(input);
    div.append(label);    
  } else {
    div.append(input);    
  }  
  
  div.appendTo($('#form'));
}

$(document).ready(function() {
  addField();
  addField('Field 1: ');  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>

工作于：

  • 铬：49+

  • 火狐：44+

于 2016-08-15T19:18:05.940 回答
324

更新

现在看来 Chrome 忽略了style="display: none;"orstyle="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>案子就解决了。

于 2014-03-27T16:54:07.653 回答
161

Chrome 现在似乎会忽略autocomplete="off"，除非它在<form autocomplete="off">标签上。

于 2013-04-21T11:03:21.623 回答
143

2021 年更新：将<input type="text">
更改为<input type="search" autocomplete="off" >

就这些。保留以下答案以怀旧。

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

<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 日将错误关闭为“不会修复”。请参阅我最初提交的错误报告中的最后一条评论，以获得完整的解释。TL;DR：使用语义自动完成属性，例如 autocomplete="new-street-address" 来避免 Chrome 执行自动填充。

于 2015-06-16T16:51:08.437 回答
104

现代方法

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

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

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

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

工作示例

于 2015-09-15T05:55:12.227 回答
57

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

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

用户代理可能允许用户覆盖元素的自动填充字段名称，例如将其从“关闭”更改为“打开”以允许记住和预填充值，尽管页面作者反对，或者始终“关闭”，从不记住价值观。但是，用户代理不应允许用户轻易地将自动填充字段名称从“off”更改为“on”或其他值，因为如果始终记住所有值，无论站点的偏好如何，都会对用户产生重大的安全隐患。

因此，在 Chrome 的情况下，开发人员基本上说“我们将让用户自行决定他们是否想要autocomplete工作。如果你不想要它，请不要在浏览器中启用它” .

然而，对于我来说，这似乎有点过分热心，但事实就是如此。该规范还讨论了这种举措的潜在安全影响：

“off”关键字表示控件的输入数据特别敏感（例如核武器的激活码）；或者它是一个永远不会被重复使用的值（例如银行登录的一次性密钥），因此用户每次都必须明确输入数据，而不是能够依赖 UA 来预填充对他的价值；或者文档提供了自己的自动完成机制并且不希望用户代理提供自动完成值。

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

Mozilla 的一篇文章正是谈到了这个问题：

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

在某些情况下，即使自动完成属性设置为关闭，浏览器也会继续建议自动完成值。这种意想不到的行为可能会让开发人员感到非常困惑。真正强制不完成的技巧是为属性分配一个随机字符串

所以下面的代码应该可以工作：

autocomplete="nope"

以下各项也应如此：

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

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

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

因此，许多现代浏览器不支持登录字段的 autocomplete="off"。

  • 如果站点为表单设置了 autocomplete="off"，并且表单包含用户名和密码输入字段，则浏览器仍会提供记住此登录信息，如果用户同意，浏览器将在下次登录时自动填充这些字段用户访问此页面。
  • 如果站点为用户名和密码输入字段设置了 autocomplete="off"，那么浏览器仍会提供记住此登录信息，如果用户同意，浏览器将在用户下次访问此页面时自动填充这些字段。

这是 Firefox（自 38 版起）、Google Chrome（34 版起）和 Internet Explorer（11 版起）中的行为。

最后一点关于属性是否属于form元素或input元素的信息。规范再次给出了答案：

如果省略 autocomplete 属性，则使用与元素的表单所有者的 autocomplete 属性的状态相对应的默认值（“on”或“off”）。如果没有表单所有者，则使用值“on”。

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

概括

要禁用autocomplete整个表单：

<form autocomplete="off" ...>

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

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

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

<input autocomplete="off" ...>

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

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

请记住，某些用户代理甚至可以覆盖您最艰难地尝试禁用autocomplete.

于 2016-01-25T17:40:03.357 回答
48

TL;DR：告诉 Chrome 这是一个新密码输入，它不会提供旧密码作为自动完成建议：

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

autocomplete="off"由于设计决定而无法正常工作 - 大量研究表明，如果用户可以将密码存储在浏览器或密码管理器中，他们将更难破解密码。

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

<!-- 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 还可以直接使用凭据 API管理网站的密码，这是一个标准，最终可能会得到普遍支持。

于 2014-07-22T09:43:24.613 回答
42

目前的解决方案是使用type="search". Google 不会将自动填充应用于具有某种搜索类型的输入。

见：https ://twitter.com/Paul_Kinlan/status/596613148985171968

2016 年 4 月 4 日更新：看起来这是固定的！见http://codereview.chromium.org/1473733008

于 2015-05-08T10:53:31.887 回答
33

我已经通过使用随机字符解决了与谷歌浏览器的无休止的斗争。当你总是用随机字符串渲染自动完成时，它永远不会记住任何东西。

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

希望它对其他人有所帮助。

于 2018-08-04T14:23:27.837 回答
27

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

我通过将密码字段设置为只读并在用户单击它或对该字段使用制表键时激活它来修复它。

修复浏览器自动填充：只读并在焦点上设置可写（在鼠标单击和选项卡中通过字段）

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

更新：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/

// 更新结束

顺便说一下，关于我的观察的更多信息：

有时我会在 Chrome 和 Safari 上注意到这种奇怪的行为，当密码字段以相同的形式出现时。我猜，浏览器会寻找密码字段来插入您保存的凭据。然后它将用户名自动填充到最近的 textlike-input 字段中，该字段出现在 DOM 中的密码字段之前（只是由于观察而猜测）。由于浏览器是最后一个实例并且您无法控制它，有时即使 autocomplete=off 也不会阻止将凭据填写到错误的字段中，但不会阻止用户或昵称字段。

于 2014-11-14T13:59:01.523 回答
26

Chrome 版本 34 现在忽略了autocomplete=off， 请参阅此。

很多人讨论这是好事还是坏事？你有什么看法？

于 2014-04-09T09:11:04.717 回答
25

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

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

工作于：

  • 铬：53、54、55
  • 火狐：48、49、50
于 2017-02-01T10:19:57.337 回答
16

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

已经在这里写的旧答案可以反复试验，但大多数都没有链接到任何官方文档或 Chrome 在这件事上必须说的内容。

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

简单来说，有两种情况——

  • [案例 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

于 2021-04-09T07:28:49.713 回答
15

Autocomplete="Off"不再起作用了。

尝试仅使用随机字符串而不是"Off"，例如Autocomplete="NoAutocomplete"

我希望它有所帮助。

于 2019-01-07T10:19:29.833 回答
11

看到 chrome 忽略了autocomplete="off"，我用一种愚蠢的方法解决了它，即使用“假输入”欺骗 chrome 来填充它而不是填充“真实”输入。

例子：

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

Chrome 会填写“假输入”，提交时，服务器会取“真实输入”的值。

于 2014-05-05T08:09:10.933 回答
11

我发布这个答案是为了给这个问题带来更新的解决方案。我目前正在使用 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">

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

批准日期：

  • 铬：49
  • 火狐：44、45
  • 边缘：25
  • 互联网浏览器：11
于 2016-03-10T19:25:27.703 回答
11

不知道为什么这在我的情况下有效，但是在我使用的 chrome 上autocomplete="none"，Chrome 停止为我的文本字段建议地址。

于 2018-11-21T17:58:44.077 回答
10

写一个 2020+ 的答案，以防万一这对任何人都有帮助。我在上面尝试了许多组合，尽管在我的情况下遗漏了一个键。即使我保留了 autocomplete="nope" 一个随机字符串，但它对我不起作用，因为我缺少name属性！

所以我保留了 name='password' 和 autocomplete = "new-password"

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

和 autocomplete = "new-password" // 也一样，所以 google 停止建议密码（管理密码下拉菜单）

这对我来说效果很好。（我为 Cordova/ionic 使用的 Android 和 iOS 网络视图做了这个）

<ion-input [type]="passwordType" name="password" class="input-form-placeholder" formControlName="model_password"
        autocomplete="new-password" [clearInput]="showClearInputIconForPassword">
</ion-input>
于 2020-08-07T13:23:17.267 回答
9

对于任何寻找解决方案的人，我终于弄清楚了。

autocomplete="off"如果页面是 HTML5 页面（我使用的是 XHTML），Chrome 只服从。

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

于 2013-04-16T18:59:40.713 回答
9

autocomplete="off"通常工作，但并非总是如此。这取决于name输入字段的。“地址”、“电子邮件”、“姓名”等名称 - 将自动完成（浏览器认为它们可以帮助用户），当“代码”、“pin”等字段 - 不会自动完成（如果autocomplete="off"已设置）

我的问题是 - 自动完成与谷歌地址助手搞乱了

我通过重命名来修复它

从

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

至

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

在 chrome 71 中测试。

于 2019-02-07T03:38:59.970 回答
9

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

<input type="search"/>

自动完成功能消失了！

Chrome 86、FireFox、Edge 87 取得成功。

于 2020-12-08T09:14:48.533 回答
7

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

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

于 2017-10-29T07:02:51.670 回答
6

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

Google 不会对具有某种搜索类型的输入应用自动填充。

于 2015-10-28T16:29:33.083 回答
6

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

  1. 表格顶部的以下内容： 
<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>

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

    自动完成=“关闭”

所以为了快速解决这个问题，起初我尝试使用最初将密码输入元素设置为禁用的主要技巧，然后在文档准备功能中使用 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

于 2016-01-29T03:46:42.700 回答
5

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

  1. 将假字段放在真实字段之前：

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

  2. 隐藏虚假字段：

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

  3. 你做到了！

这也适用于旧版本。

于 2016-05-07T13:59:04.117 回答
5

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

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

于 2015-10-17T00:43:12.120 回答
4

在 chrome v. 34 之后，autocomplete="off"在<form>标签处设置不起作用

我进行了更改以避免这种烦人的行为：

  1. 去掉密码输入的name和id
  2. 在输入中放置一个类（例如passwordInput：）

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

最后，要使表单工作，请在用户单击提交按钮时运行此代码，或者在您想触发表单提交时运行：

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

就我而言，我曾经id="password" name="password"输入过密码，所以我在触发提交之前将它们放回去。

于 2014-04-23T16:46:06.690 回答
4

从 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);
于 2015-05-21T13:03:04.937 回答
4

我设法利用此规则禁用自动完成：

不是密码但应该被隐藏的字段，例如信用卡号，也可能具有 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">

然而，它伴随着巨大的责任:)

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

于 2020-07-01T10:43:54.427 回答
4

我有一个类似的问题，输入字段要么是名字要么是电子邮件。我设置了 autocomplete="off" 但 Chrome 仍然强制建议。原来是因为占位符文本中有“姓名”和“电子邮件”这两个词。

例如

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

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

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />
于 2015-09-15T13:57:50.547 回答
3

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

Chrome 现在完全忽略了 autocomplete="off"。虽然 JS hack 可能很有效，但我发现了一种在撰写本文时有效的简单方法：

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

是的，这仍然是一个 hack，但它对我有用。YMMV。

于 2014-07-25T10:55:43.950 回答
3

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
});
于 2020-07-15T20:06:17.700 回答
3

我刚刚更新到Chrome 49并且Diogo Cid 的解决方案不再起作用。

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

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

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

于 2016-03-14T11:42:26.717 回答
2

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

<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>
于 2014-09-30T06:45:15.350 回答
2

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

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 准备好之后加载，或者在表单呈现之后加载。

于 2013-06-13T16:19:08.810 回答
2

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

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

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

演示：

  • 顶部input有自动完成工作
  • 底部 通过添加禁用input自动完成autocomplete="off"
于 2018-08-29T17:00:40.007 回答
2

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

 jQuery('document').ready(function(){
        //For disabling Chrome Autocomplete
        jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000));
 });
于 2015-10-05T12:43:22.477 回答
2

2021 回答： 可悲的是，唯一有效的东西是令人作呕的骇人听闻。我的解决方案是在生成前端标记时在名称属性的末尾添加一个动态生成的随机数（例如 <input name="postcode-22643"...）。这暂时适当地欺骗了浏览器。

然后，您需要在服务器端添加一些东西来清理传入的 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) {
...
})
于 2021-02-09T02:16:20.117 回答
2

对我来说，在表单和输入中设置 autocomplete="off" 是有效的。但可以是片状的。有时它会建议密码或一些保存的登录名+密码选项。但不要预先填写。

铬版本：81.0.4044.138

代码笔

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

其他选项：

  1. 删除“form”标签...或在提交前将其从“div”更改为“form”。
  2. 使用 javascript 和一些 contentEditable="true" 字段可以让你的方式......

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

于 2020-07-25T04:47:43.520 回答
1

隐藏的输入元素技巧似乎仍然有效（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" />
于 2015-06-29T20:53:22.207 回答
1

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

于 2016-04-04T09:47:26.687 回答
1

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

当您单击密码输入字段时，它开始显示建议，但是当触发焦点在输入字段上时，它不会显示建议，所以这就是我解决问题的方法。

我希望它会帮助某人。

于 2021-03-30T03:11:43.903 回答
1

快速破解，如果您在阅读上述答案后仍然获得自动完成功能，您可以试试这个。提供随机字符串将删除自动完成。

<input autocomplete="somerandomstring" or autocomplete="disabled">

Idk 是否正确，它对我有用。

于 2021-12-23T11:49:49.057 回答
1

当使用像jQuery UI 的自动完成这样的小部件时，请确保检查它是否没有将自动完成属性添加/更改为关闭。我发现使用它时确实如此，并且会破坏您为覆盖任何浏览器字段缓存所做的任何工作。确保您具有唯一的名称属性，并在小部件初始化后强制使用唯一的自动完成属性。请参阅下面的一些提示，了解这可能如何适用于您的情况。

<?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; ?>" />
于 2017-12-20T23:02:06.323 回答
1

这些方法都不起作用了，chrome忽略了所有这些属性，唯一的解决方案是使用jquery

在输入上使用它

<input onclick="$(this).removeAttr('readonly');" onblur="$(this).attr('readonly', true);" readonly />

于 2021-11-25T07:09:42.700 回答
0

我刚刚尝试了以下方法，它似乎在 Chrome 53 上起到了作用 - 在输入密码字段时，它还会禁用“使用密码：”下拉菜单。

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

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

甚至更好：

onfocus="if(this.getAttribute('type')==='text') this.setAttribute('type','password')"
于 2016-10-08T16:02:12.043 回答
0

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

<input type="text" name="name" value="  ">
于 2015-12-10T10:41:39.303 回答
0

基本上我们可以摆脱来自 chrome、firefox 或任何类型浏览器的任何文本框的自动完成功能。这是简单的JavaScript。

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

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

于 2021-07-31T06:17:02.120 回答
0

我称之为大锤方法，但它似乎对我有用，我尝试过的所有其他方法都失败了：

<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 属性的操作，例如按元素名称使用选择器，此解决方案应该是无害的。

于 2018-08-24T14:45:33.747 回答
0

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

<form name="formNameHere">....</form>
<script type="text/javascript">
    setTimeout(function(){
        document.formNameHere.reset();
    },500);
</script>
于 2018-03-12T23:27:49.563 回答
0

在表单标签之后添加这个：

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

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

.div-form{
opacity: 0;
}
于 2017-02-23T06:14:23.423 回答
0

您可以使用以下概念为 chrome 以及其他浏览器实现 AutoComplete='false'。采用一个虚拟输入类型，它将以不透明度 0 隐藏。默认情况下，chrome 浏览器触发了第一个已经隐藏的输入类型。

<input style="opacity: 0; position: absolute; z-index: -1;" name="email">
<input type="search" name="email" class="form-control" autocomplete="new-email" id="email">
于 2016-09-19T09:49:42.490 回答
0

经过大量挖掘后，我发现当我们删除输入标签上的名称和 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>

于 2020-12-11T08:41:15.357 回答
0

我找到了另一种解决方案 - 只需autocomplete="off"使用style="-webkit-text-security: disc;". 您还可以通过以下方式将其添加到您的 CSS 规则中：

[autocomplete="off"] {
  -webkit-text-security: disc;
}

主要目标是从元素中消除type="password"或其他类似类型的属性。

至少，在2021-01-24这个解决方案有效的那一刻......

于 2021-01-23T23:56:54.450 回答
0

我最近遇到了这个问题，没有一个答案对我有用。就我而言，由于我不关心将输入字段嵌套在“表单”标签中，因此我通过为输入提供一个空的数据列表来修复 chrome 自动完成问题。因此，现在 chrome 应该为您提供来自空的“datalist”的自动完成建议。请记住，如果输入嵌套在“表单”标签中，则此解决方案不起作用。令人惊讶的是，除了这个技巧，没有其他东西对我有用。

<input type="text" autocomplete="off" list="emptyList" />
<datalist id="emptyList"></datalist>

您可以在此处了解有关数据列表的更多信息： https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

考虑到浏览器的兼容性，使用起来似乎是安全的。

于 2021-12-28T18:32:08.227 回答
0

对于这个问题，我使用了这个 css 解决方案。它对我有用。

input{
  text-security:disc !important;
  -webkit-text-security:disc !important;
  -moz-text-security:disc !important;
}
于 2018-09-03T11:43:02.510 回答
0

这是在 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 字段上显示用户名下拉列表。

于 2016-07-08T00:44:33.347 回答
0

除了给它一个假字段来自动完成之外，没有一个解决方案有效。我制作了一个 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
于 2018-04-04T21:47:25.037 回答
0

我在表单中的一个搜索字段中遇到了类似的问题。既不为我工作，autocomplete= "false"也不autocomplete= "off"为我工作。事实证明，当您将input元素中的 aria-label 属性设置为类似city或address类似的东西时，chrome 会覆盖您的所有设置并显示自动完成

所以我所做的修复是city从 aria-label 中删除部分并提出不同的值。最后自动完成停止显示

chrome 会覆盖自动完成设置

于 2020-05-14T16:48:30.113 回答
0

我只是找到一个技巧：

<input type="password" id="some_id" name="some_name" value=" " placeholder="Password">

<script>
 $(function)
 {
    $("#some_id").val("");
 }
</script>

请注意，值是空格。它可以防止在 Chrome 中自动编译，并且输入字段显示占位符。

于 2021-09-29T22:54:58.000 回答
0

2021年9月答案

由于我必须处理这个问题，唯一稳定的工作解决方案是在每次呈现网站时为元素生成一个随机字符串name和autocomplete属性。<input>

下面是一个使用纯 JavaScript 的简单演示。

html:

<div>
     <h3>Autofill disabled with random string</h3>
     <form id="disable-autofill-form">
       <div>
         <span>First Name</span>
         <input type="text" />
       </div>
       <div>
         <span>Last Name</span>
         <input type="text" />
       </div>
       <div>
         <span>City</span>
         <input type="text" />
       </div>
       <div>
         <span>Street</span>
         <input type="text" />
       </div>
       <div>
         <span>Postal Code</span>
         <input type="text" />
       </div>
     </form>
</div>

JavaScript：

const randomString = (Math.random() + 1).toString(36).substring(5);
const disableAutoFillForm = document.getElementById('disable-autofill-form');
const disableAutoFillFormInputs = [
  ...disableAutoFillForm.getElementsByTagName('input'),
];
disableAutoFillFormInputs.forEach((input) => {
  input.setAttribute('autocomplete', randomString);
  input.setAttribute('name', randomString);
});

可以在这里找到一个可以使用它的 Stackblitz 项目。

于 2021-09-26T19:09:56.217 回答
-1

我不得不在一个带有巨大网络表单的 drupal 页面上解决这个问题。因为我无法编辑每个输入的 html 代码，所以我想出了以下通用 jQuery 解决方案。

<script>

    // Form Autocomplete FIX
    function is_mobile() {
        if( screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ) {
            return true;
        }
        return false;
    }
    jQuery( 'input[autocomplete="off"]' ).each( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).attr( 'readonly', true );
    } );
    jQuery( 'input[autocomplete="off"]' ).focus( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).removeAttr( 'readonly' );
        jQuery( this ).focus();
    } );
    jQuery( 'input[autocomplete="off"]' ).blur( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).attr( 'readonly', true );
    } );

</script>

浏览器检测从这里。

我想有可能优化这段代码（我很想得到一些建议），但你会从中得到想法。

于 2021-12-22T11:01:54.177 回答
-1

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

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

或按事件更改类型：

ele.oninput=function(){ele.type="password"}
于 2020-05-15T08:00:43.363 回答
-1

我找到了一个适合我的解决方案。它不会禁用自动完成功能，但允许对其进行自定义。在 Chrome 96、Opera 82 中测试

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: none;
    border-bottom: 1px solid;
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
}
于 2022-01-05T13:33:21.427 回答
-2

我想出了以下解决方案，该解决方案使用该属性查询所有字段，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 放弃尝试自动完成字段所需的时间。我很高兴听到其他时间似乎对其他人更有效。

于 2014-11-29T07:42:42.030 回答