html - 您如何在 Web 表单字段/输入标签上禁用浏览器自动完成功能？

Question

您如何在主要浏览器中禁用特定输入（或表单字段）的自动完成功能？

Answer 1

Firefox 30 忽略autocomplete="off"密码，而是选择提示用户是否应将密码存储在客户端上。请注意2014 年 5 月 5 日的以下评论：

• 密码管理器总是提示是否要保存密码。未经用户许可，不会保存密码。
• 我们是继 IE 和 Chrome 之后第三个实现此更改的浏览器。

根据Mozilla Developer Network文档，布尔表单元素属性autocomplete可防止表单数据在旧版浏览器中缓存。

<input type="text" name="foo" autocomplete="off" />

Answer 2

除了设置之外autocomplete=off，您还可以通过生成页面的代码将表单字段名称随机化，可能通过在名称末尾添加一些特定于会话的字符串。

提交表单后，您可以在服务器端处理它们之前剥离该部分。这将阻止 Web 浏览器为您的字段查找上下文，也可能有助于防止 XSRF 攻击，因为攻击者无法猜测表单提交的字段名称。

Answer 3

大多数主要浏览器和密码管理器（正确，恕我直言）现在都忽略autocomplete=off.

为什么？许多银行和其他“高安全性”网站autocomplete=off“出于安全目的”添加到他们的登录页面，但这实际上降低了安全性，因为它会导致人们更改这些高安全性网站上的密码，因为自动完成功能很容易记住（并因此破解）坏了。

很久以前，大多数密码管理器开始忽略autocomplete=off，现在浏览器开始只对用户名/密码输入做同样的事情。

不幸的是，自动完成实现中的错误将用户名和/或密码信息插入到不适当的表单字段中，导致表单验证错误，或者更糟糕的是，意外地将用户名插入到用户故意留空的字段中。

网络开发人员要做什么？

• 如果您可以将所有密码字段单独保留在页面上，那将是一个很好的开始，因为似乎密码字段的存在是用户/密码自动完成的主要触发因素。否则，请阅读以下提示。
• Safari注意到有 2 个密码字段并在这种情况下禁用自动完成，假设它必须是更改密码表单，而不是登录表单。因此，请确保在您允许的任何表单中使用 2 个密码字段（新密码和确认新密码）

• 不幸的是， Chrome 34 会在看到密码字段时尝试使用用户/密码自动填充字段。这是一个非常糟糕的错误，希望他们会改变 Safari 的行为。但是，将此添加到表单顶部似乎会禁用密码自动填充：

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

我尚未彻底调查 IE 或 Firefox，但如果其他人在评论中有信息，我很乐意更新答案。

Answer 4

有时，即使 autocomplete=off也不会阻止将凭据填写到错误的字段中，但不会阻止用户或昵称字段。

此解决方法是对apinstein关于浏览器行为的帖子的补充。

修复浏览器自动填充只读并在焦点上设置可写（单击和选项卡）

 <input type="password" readonly
     onfocus="this.removeAttribute('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 上的这种奇怪行为。我猜浏览器会寻找一个密码字段来插入您保存的凭据。然后它自动填充（只是根据观察猜测）最近的文本输入字段，该字段出现在 DOM 中的密码字段之前。由于浏览器是最后一个实例，您无法控制它。

上面的这个只读修复对我有用。

Answer 5

Chrome 的解决方案是autocomplete="new-password"在输入类型密码中添加。请检查下面的示例。

例子：

<form name="myForm"" method="post">
   <input name="user" type="text" />
   <input name="pass" type="password" autocomplete="new-password" />
   <input type="submit">
</form>

如果 Chrome 找到一个密码类型的框，它总是自动完成数据，这足以指示该框autocomplete = "new-password"。

这对我很有效。

注意：确保F12您的更改生效。很多时候，浏览器将页面保存在缓存中，这给我一个不好的印象，它不起作用，但浏览器并没有真正带来变化。

Answer 6

<form name="form1" id="form1" method="post"
      autocomplete="off" action="http://www.example.com/form.cgi">

这适用于 Internet Explorer 和 Mozilla Firefox。缺点是它不是 XHTML 标准。

Answer 7

正如其他人所说，答案是autocomplete="off"。

但是，我认为值得说明为什么在某些情况下使用它是一个好主意，因为对此的一些答案和重复的问题表明最好不要关闭它。

停止浏览器存储信用卡号码不应该留给用户。太多的用户甚至不会意识到这是一个问题。

在信用卡安全码字段上将其关闭尤为重要。如本页所述：

“永远不要存储安全码......它的价值取决于提供它的唯一方法是从实体信用卡中读取它的假设，证明提供它的人实际上持有卡。”

问题是，如果它是公共计算机（网吧、图书馆等），那么其他用户很容易窃取您的卡详细信息，甚至在您自己的计算机上，恶意网站也可能窃取自动完成数据。

Answer 8

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

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

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

Answer 9

我不得不乞求与那些说避免禁用自动完成的答案不同。

首先要提出的是，未在登录表单字段上明确禁用自动完成是 PCI-DSS 失败。此外，如果用户的本地计算机遭到破坏，那么任何自动完成数据都可以被攻击者轻易获得，因为它是以明文形式存储的。

可用性肯定存在争议，但是在哪些表单字段应该禁用自动完成功能和哪些不应该禁用自动完成时，存在一个非常好的平衡。

Answer 10

三个选项：

第一的：

<input type='text' autocomplete='off' />

第二：

<form action='' autocomplete='off'>

第三（JavaScript代码）：

$('input').attr('autocomplete', 'off');

Answer 11

在一个相关的或实际上，在完全相反的音符上——

“如果您是上述表单的用户并且想要重新启用自动完成功能，请使用此书签页面中的“记住密码”书签。它会删除页面autocomplete="off"上所有表单的所有属性。继续战斗吧！ "

Answer 12

这对我有用。

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

我们也可以在文本、选择等其他控件中使用此策略

Answer 13

此外

autocomplete="off"

采用

readonly onfocus="this.removeAttribute('readonly');"

对于您不希望他们记住表单数据的输入（username、password等），如下所示：

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

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

希望这可以帮助。

Answer 14

刚设置autocomplete="off"。这样做有一个很好的理由：您想提供自己的自动完成功能！

Answer 15

在这次谈话中，没有一个解决方案对我有用。

我终于想出了一个不需要任何 JavaScript的纯 HTML 解决方案，可以在现代浏览器中运行（Internet Explorer 除外；必须至少有一个问题，对吧？），并且不需要您禁用整个表单的自动完成功能.

只需关闭自动完成功能，然后为您希望它在表单中工作form的任何内容打开它。input例如：

<form autocomplete="off">
    <!-- These inputs will not allow autocomplete and Chrome
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- This field will allow autocomplete to work even
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

Answer 16

我们确实在一个站点上使用了 sasb的想法。

这是一个运行医生办公室的医疗软件网络应用程序。然而，我们的许多客户都是外科医生，他们使用了许多不同的工作站，包括半公共终端。因此，他们希望确保不了解自动保存密码的含义或没有注意的医生不会意外地让他们的登录信息易于访问。

当然，这是在 Internet Explorer 8、Firefox 3.1 等开始出现隐私浏览的想法之前。即便如此，许多医生仍被迫在 IT 不会改变的医院中使用老式浏览器。

因此，我们让登录页面生成仅适用于该帖子的随机字段名称。是的，它不太方便，但它只是让用户头疼的是不在公共终端上存储登录信息。

Answer 17

我一直在尝试无尽的解决方案，然后我发现了这个：

而不是autocomplete="off"简单地使用autocomplete="false"

就这么简单，它在谷歌浏览器中也像一个魅力！

Answer 18

我认为autocomplete=offHTML 5 支持。

问问自己为什么要这样做——在某些情况下这可能是有道理的，但不要仅仅为了这样做而这样做。

这对用户来说不太方便，甚至在 OS X 中也没有安全问题（下面由 Soren 提到）。如果您担心人们的密码被远程盗取 - 即使您的应用使用autcomplete=off.

作为选择让浏览器记住（大部分）我的信息的用户，如果您的网站不记得我的信息，我会觉得很烦人。

Answer 19

最佳解决方案：

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

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

工作于：

• 铬：49、50、51、52、53、54、55、56、57、58、59、60、61、62、63 和 64

• 火狐：44、45、46、47、48、49、50、51、52、53、54、55、56、57和58

Answer 20

我刚遇到这个问题并尝试了几次失败，但这一个对我有用（在MDN上找到）：

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

autocomplete="nope"

Answer 21

为字段使用非标准名称和 ID，因此“name”而不是“name_”。浏览器将不会将其视为名称字段。

最好的部分是您可以对某些（但不是全部）字段执行此操作，它会自动完成一些（但不是所有）字段。

Answer 22

添加autocomplete="off"不会削减它。

input将type 属性更改为type="search".
Google 不会对具有某种搜索类型的输入应用自动填充。

Answer 23

添加

autocomplete="off"

input到表单标签将禁用该特定表单中所有字段的浏览器自动完成（之前在该字段中键入的内容） 。

测试：

• 火狐 3.5、4 测试版
• 互联网浏览器 8
• 铬合金

Answer 24

为了避免无效的 XHTML，您可以使用 JavaScript 设置此属性。使用 jQuery 的示例：

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

问题是没有 JavaScript 的用户将获得自动完成功能。

Answer 25

所以这里是：

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

Answer 26

这是浏览器现在忽略的安全问题。浏览器使用输入名称来识别和存储内容，即使开发人员认为该信息是敏感信息并且不应存储。

使两个请求之间的输入名称不同将解决问题（但仍会保存在浏览器的缓存中，也会增加浏览器的缓存）。

要求用户在浏览器设置中激活或停用选项并不是一个好的解决方案。该问题可以在后端解决。

这是修复。所有自动完成元素都是使用隐藏输入生成的，如下所示：

<?php $r = md5(rand() . microtime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<?php echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<?php echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

然后服务器像这样处理 post 变量：( Demo )

foreach ($_POST as $key => $val) {
    $newKey = preg_replace('~^__autocomplete_fix_~', '', $key, 1, $count);
    if ($count) {
        $_POST[$val] = $_POST[$newKey];
        unset($_POST[$key], $_POST[$newKey]);
    }
}

可以照常访问该值

echo $_POST['username'];

并且浏览器将无法建议来自先前请求或先前用户的信息。

即使浏览器更新他们的技术以忽略/尊重自动完成属性，这将继续有效。

Answer 27

我不敢相信这在被报道这么久之后仍然是一个问题。以前的解决方案对我不起作用，因为Safari似乎知道元素何时不显示或不在屏幕上，但是以下解决方案对我有用：

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

Answer 28

autocomplete="off"如果不起作用，也试试这些：

autocorrect="off" autocapitalize="off" autocomplete="off"

Answer 29

此处提到的所有技巧都不适用于 Chrome。这里讨论了这个问题：https ://code.google.com/p/chromium/issues/detail?id=468153#c41

在作品中添加这个<form>（至少现在）：

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

Answer 30

您可以在input.

例如;

<input type=text name="test" autocomplete="off" />

Answer 31

许多现代浏览器不再支持登录字段的 autocomplete="off"。 autocomplete="new-password"正在工作，更多信息MDN 文档

Answer 32

这是自 2021 年 5 月起适用于所有浏览器的完美解决方案！

TL;博士

将您的输入字段名称和字段 ID 重命名为不相关的名称，例如'data_input_field_1'. 然后将‌字符添加到标签的中间。这是一个非打印字符，因此您不会看到它，但它会诱使浏览器不将该字段识别为需要自动完成的字段，因此不会显示内置的自动完成小部件！

细节

几乎所有浏览器都使用字段名称、id、占位符和标签的组合来确定该字段是否属于可以从自动完成中受益的一组地址字段。因此，如果您有一个<input type="text" id="address" name="street_address">几乎所有浏览器都会将该字段解释为地址字段的字段。因此，浏览器将显示其内置的自动完成小部件。梦想是使用该属性autocomplete="off"会起作用，不幸的是，现在大多数浏览器都不服从请求。

所以我们需要使用一些技巧来让浏览器不显示内置的自动完成小部件。我们将这样做的方法是欺骗浏览器，使其相信该字段根本不是地址字段。

首先将id和name属性重命名为不会泄露您正在处理与地址相关的数据的内容。因此，与其使用<input type="text" id="city-input" name="city">，不如使用类似的东西<input type="text" id="input-field-3" name="data_input_field_3">。浏览器不知道 data_input_field_3 代表什么。但你做了。

如果可能，不要使用占位符文本，因为大多数浏览器也会考虑到这一点。如果您必须使用占位符文本，那么您必须发挥创意并确保您没有使用任何与地址参数本身相关的词语（例如City）。使用类似的东西Enter location可以解决问题。

最后一个参数是附加到字段的标签。但是，如果您像我一样，您可能希望保持标签完整，并向您的用户显示可识别的字段，例如“地址”、“城市”、“州”、“国家”。好吧，好消息：你可以！实现这一点的最佳方法是插入一个零宽度非连接字符,‌作为标签中的第二个字符。所以替换<label>City</label>为<label>C&#8204;ity</label>. 这是一个非打印字符，因此您的用户会看到City，但浏览器会被欺骗C ity而无法识别该字段！

任务完成！如果一切顺利，浏览器不应再在这些字段上显示内置地址自动完成小部件！

Answer 33

Chrome计划支持这一点。

目前最好的建议是使用很少自动完成的输入类型。

铬讨论

<input type='search' name="whatever" />

要与 Firefox 兼容，请使用普通 autocomplete='off'

<input type='search' name="whatever" autocomplete='off' />

Answer 34

如果您删除form标签，您可以禁用自动完成功能。

我的银行也这样做了，我想知道他们是怎么做到的。它甚至会在您删除标签后删除浏览器已经记住的值。

Answer 35

没有虚假输入，没有javascript！

无法跨浏览器一致地禁用自动填充。我尝试了所有不同的建议，但没有一个适用于所有浏览器。唯一的方法是根本不使用密码输入。这是我想出的：

<style type="text/css">
    @font-face {
        font-family: 'PasswordDots';
        src: url('text-security-disc.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    input.password {
        font-family: 'PasswordDots' !important;
        font-size: 8px !important;
    }
</style>

<input class="password" type="text" spellcheck="false" />

下载：text-security-disc.woff

这是我的最终结果：

负面影响是可以从输入中复制纯文本，尽管应该可以使用一些 JS 来防止这种情况。

Answer 36

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        try {
            $("input[type='text']").each(
                function(){
                   $(this).attr("autocomplete", "off");
                });
        }
        catch (e) {
        }
    });
</script>

Answer 37

这就是我们所说的文本框的自动完成。

我们可以通过两种方式禁用文本框的自动完成：

1. 按浏览器标签

2. 按代码

   要在浏览器中禁用，请转到设置

转到高级设置并取消选中该复选框，然后还原。

如果要在编码标签中禁用，可以执行以下操作 -

使用AutoCompleteType="Disabled"：

<asp:TextBox runat="server" ID="txt_userid" AutoCompleteType="Disabled"></asp:TextBox>

通过设置表格autocomplete="off"：

<asp:TextBox runat="server" ID="txt_userid" autocomplete="off"></asp:TextBox>

通过设置表格autocomplete="off"：

<form id="form1" runat="server" autocomplete="off">
    // Your content
</form>

通过使用 .cs 页面中的代码：

protected void Page_Load(object sender, EventArgs e)
{
    if(!Page.IsPostBack)
    {
        txt_userid.Attributes.Add("autocomplete", "off");
    }
}

通过使用 jQuery

<head runat="server">
    <title></title>

    <script src="Scripts/jquery-1.6.4.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#txt_userid').attr('autocomplete', 'off');
        });
    </script>

Answer 38

如果您的问题是自动完成密码字段，那么您可能会发现这很有用...

我们在网站的几个区域遇到了这个问题，企业希望重新向用户查询他们的用户名和密码，并且出于合同原因特别不希望密码自动填充起作用。我们发现最简单的方法是输入一个假密码字段供浏览器查找和填写，而真正的密码字段保持不变。

<!-- This is a fake password input to defeat the browser's autofill behavior -->
<input type="password" id="txtPassword" style="display:none;" />
<!-- This is the real password input -->
<input type="password" id="txtThisIsTheRealPassword" />

请注意，在 Firefox 和 IE 中，将任何类型密码的输入放在实际密码之前就足够了，但 Chrome 看穿了这一点，并迫使我实际命名假密码输入（通过给它一个明显的密码 id）来获得它“咬”。我使用了一个类来实现样式，而不是使用嵌入式样式，所以如果上述方法由于某种原因不起作用，请尝试一下。

Answer 39

用readonly发布的答案非常聪明并且有效。

但是当我使用Bootstrap时，只读输入字段 - 直到获得焦点 - 用灰色背景标记。在文档加载时，您可以通过简单地锁定和解锁输入来欺骗浏览器。

所以我有一个想法将它实现到一个 jQuery 解决方案中：

jQuery(document).ready(function () {
    $("input").attr('readonly', true);
    $("input").removeAttr('readonly');
});

Answer 40

我的问题主要是 Chrome 的自动填充，但我认为这可能比自动填充更成问题。

技巧：使用计时器重置表单并将密码字段设置为空白。100 毫秒的持续时间似乎是它工作的最小值。

$(document).ready(function() {
    setTimeout(function() {
        var $form = $('#formId');
        $form[0].reset();
        $form.find('INPUT[type=password]').val('');
    }, 100);
});

Answer 41

我TextMode="password" autocomplete="new-password"在 aspx 的页面加载中使用它txtPassword.Attributes.Add("value", '');

Answer 42

Google Chrome 会忽略autocomplete="off"某些输入的属性，包括密码输入和按名称检测到的常见输入。

例如，如果您有一个带有 name 的输入，那么即使您告诉它不要address，Chrome 也会根据在其他网站上输入的地址提供自动填充建议：

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

如果您不希望 Chrome 这样做，那么您可以重命名或命名表单字段的名称：

<input type="string" name="mysite_addr" autocomplete="off">

如果您不介意自动完成之前在您的网站上输入的值，那么您可以启用自动完成。对字段名称进行命名空间应该足以防止从其他站点记住的值出现。

<input type="string" name="mysite_addr" autocomplete="on">

Answer 43

现在事情发生了变化，因为我自己尝试了旧答案不再起作用。

我确信它会起作用的实施。我在 Chrome、Edge 和 Firefox 中对此进行了测试，它确实可以解决问题。您也可以试试这个并告诉我们您的经验。

set the autocomplete attribute of the password input element to "new-password"

<form autocomplete="off">
....other element
<input type="password" autocomplete="new-password"/>
</form>

这是根据MDN

如果您正在定义用户管理页面，用户可以在其中为另一个人指定新密码，因此您希望防止自动填充密码字段，您可以使用autocomplete="new-password"

这是一个提示，浏览器不需要遵守。<input> 然而，出于这个原因，现代浏览器已经停止使用 autocomplete="new-password" 自动填充元素。

Answer 44

重要的是要知道 Firefox（我认为只有 Firefox）使用一个名为ismxfilled基本上强制自动完成的值。

ismxfilled="0"为了OFF

或者

ismxfilled="1"为了ON

Answer 45

如果不使用客户端和服务器端代码的组合，似乎不可能实现这一点。

为了确保用户每次都必须在没有自动完成的情况下填写表单，我使用了以下技术：

1. 在服务器上生成表单字段名称并使用隐藏的输入字段来存储这些名称，以便在提交到服务器时服务器端代码可以使用生成的名称来访问字段值。这是为了阻止用户选择自动填充字段。

2. 在表单上放置每个表单字段的三个实例，并使用 css 隐藏每组的第一个和最后一个字段，然后在使用 javascript 加载页面后禁用它们。这是为了防止浏览器自动填写字段。

这是一个演示 #2 https://jsfiddle.net/xnbxbpv4/中描述的 javascript、css 和 html 的小提琴

javascript:

$(document).ready(function() {
    $(".disable-input").attr("disabled", "disabled");
});

CSS：

.disable-input {
  display: none;
}

html:

<form>
<input type="email" name="username" placeholder="username" class="disable-input">
<input type="email" name="username" placeholder="username">
<input type="email" name="username" placeholder="username" class="disable-input">
<br>
<input type="password" name="password" placeholder="password" class="disable-input">
<input type="password" name="password" placeholder="password">
<input type="password" name="password" placeholder="password" class="disable-input">
<br>
<input type="submit" value="submit">
</form>

这是一个粗略的示例，说明使用带有剃刀的 asp.net 的服务器代码将有助于#1

模型：

public class FormModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

控制器：

public class FormController : Controller
{
    public ActionResult Form()
    {
        var m = new FormModel();

        m.Username = "F" + Guid.NewGuid().ToString();
        m.Password = "F" + Guid.NewGuid().ToString();

        return View(m);
    }

    public ActionResult Form(FormModel m)
    {
        var u = Request.Form[m.Username];
        var p = Request.Form[m.Password];

        // todo: do something with the form values

        ...

        return View(m);
    }
}

看法：

@model FormModel

@using (Html.BeginForm("Form", "Form"))
{
    @Html.HiddenFor(m => m.UserName)
    @Html.HiddenFor(m => m.Password)

    <input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <input type="email" name="@Model.Username" placeholder="username">
    <input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <br>
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <input type="password" name="@Model.Password" placeholder="password">
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <br>
    <input type="submit" value="submit">
}

Answer 46

我尝试了几乎所有的答案，但新版 Chrome 很聪明；如果你写

autocomplete="randomstring" or autocomplete="rutjfkde"

它会自动将其转换为

autocomplete="off"

当输入控件获得焦点时。

所以，我用jQuery做的，我的解决方案如下。

$("input[type=text], input[type=number], input[type=email], input[type=password]").focus(function (e) {
    $(this).attr("autocomplete", "new-password");
})

这是最简单的，并且可以为您在表单上拥有的任意数量的控件解决问题。

Answer 47

autocomplete="off"如果您从 JavaScript 动态设置，Safari 不会改变对自动完成的看法。但是，如果您在每个字段的基础上这样做，它会尊重。

$(':input', $formElement).attr('autocomplete', 'off');

Answer 48

这个想法是在原始字段之前创建一个具有相同名称的不可见字段。这将使浏览器自动填充隐藏字段。

我使用以下 jQuery 片段：

// Prevent input autocomplete
$.fn.preventAutocomplete = function() {
    this.each(function () {
        var $el = $(this);
        $el
            .clone(false, false) // Make a copy (except events)
            .insertBefore($el)   // Place it before original field
            .prop('id', '')      // Prevent ID duplicates
            .hide()              // Make it invisible for user
        ;
    });
};

然后就$('#login-form input').preventAutocomplete();

Answer 49

为了解决这个问题，我使用了一些 CSS 技巧，以下对我有用。

input {
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
}

请阅读本文了解更多详情。

Answer 50

为了防止浏览器自动填充用户保存的站点登录凭据，请在表单顶部放置一个文本和密码输入字段，其中包含非空值和样式“位置：绝对；顶部：-999px；左侧：-999px”设置为隐藏田野。

<form>
  <input type="text" name="username_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
  <input type="password" name="password_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
  <!-- Place the form elements below here. -->
</form>

在密码字段之前有一个文本字段很重要。否则在某些情况下可能无法阻止自动填充。

重要的是文本和密码字段的值都不能为空，以防止在某些情况下覆盖默认值。

重要的是，这两个字段位于表单中“真实”密码类型字段之前。

对于兼容 html 5.3 的较新浏览器，自动完成属性值“new-password”应该可以工作。

<form>
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" autocomplete="new-password" />
</form>

这两种方法的组合可用于支持较旧和较新的浏览器。

<form>
  <div style="display:none">
    <input type="text" readonly tabindex="-1" />
    <input type="password" readonly tabindex="-1" />
  </div>
  <!-- Place the form elements below here. -->
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" autocomplete="new-password" />
</form>

Answer 51

如果您还想阻止普通浏览器插件LastPass自动填充字段，您可以将添加的属性data-lpignore="true"添加到该线程的其他建议中。请注意，这不仅适用于密码字段。

<input type="text" autocomplete="false" data-lpignore="true" />

不久前我试图做同样的事情，但因为我发现的任何建议都不适合我而感到难过。原来是LastPass。

Answer 52

大多数答案都没有帮助，因为浏览器只是忽略了它们。（其中一些不是跨浏览器兼容的）。对我有用的修复是：

<form autocomplete="off">
    <input type="text" autocomplete="new-password" />
    <input type="password" autocomplete="new-password" />
</form>

我在表单标签上设置了 autofill="off"，在不需要自动填充的地方设置了 autofill="new-password"。

Answer 53

截至 2019 年 12 月：

在回答这个问题之前让我说，我在 SO 和不同的论坛上尝试了几乎所有的答案，但找不到适用于所有现代浏览器和 IE11 的解决方案。

所以这是我找到的解决方案，我相信这篇文章还没有讨论或提到它。

根据 Mozilla Dev Network(MDN) post about how to turn off form autocomplete

默认情况下，浏览器会记住用户通过网站上的字段提交的信息。这使浏览器能够提供自动补全（即为用户已开始输入的字段建议可能的补全）或自动填充（即在加载时预填充某些字段）

在同一篇文章中，他们讨论了autocmplete财产的使用及其限制。正如我们所知，并非所有浏览器都如我们所愿地尊重这个属性。

解决方案

所以在文章的最后，他们分享了一个适用于包括 IE11+Edge 在内的所有浏览器的解决方案。它基本上是一个可以解决问题的 jQuery 插件。这是 jQuery 插件的链接及其工作原理。

代码片段：

$(document).ready(function () {        
    $('#frmLogin').disableAutoFill({
        passwordField: '.password'
    });
});

在 HTML 中需要注意的是密码字段是文本类型，并且password应用类来识别该字段：

<input id="Password" name="Password" type="text" class="form-control password">

希望这会对某人有所帮助。

Answer 54

有很多答案，但其中大多数是黑客或某种解决方法。

这里有三种情况。

案例 I：如果这是您的标准登录表单。以任何方式关闭它可能是不好的。如果您真的需要这样做，请三思而后行。用户习惯于浏览器记住和存储密码。在大多数情况下，您不应更改该标准行为。

如果您仍然想这样做，请参阅案例 III

情况二：当这不是您的常规登录表单但输入name的id属性不是“喜欢”电子邮件、登录名、用户名、用户名、密码时。

采用

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

案例三：当这不是您的常规登录表单但输入name的id属性是“喜欢”电子邮件、登录名、用户名、用户名、密码时。

例如：login、abc_login、password、some_password、password_field。

所有浏览器都带有密码管理功能，可以记住它们或建议使用更强的密码。他们就是这样做的。

但是，假设您是网站管理员，可以创建用户并设置他们的密码。在这种情况下，您不希望浏览器提供这些功能。

在这种情况下，autocomplete="off"将不起作用。采用autocomplete="new-password"

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

有用的链接：

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

Answer 55

一种解决方法是在用户想要更改密码之前不要将密码字段插入 DOM。这可能适用于某些情况：

在我们的系统中，我们在管理页面中有一个密码字段，因此我们必须避免无意中设置其他用户的密码。由于这个原因，该表单有一个额外的复选框，它将切换密码字段的可见性。

所以在这种情况下，密码管理器的自动填充成为一个双重问题，因为用户甚至看不到输入。

解决方案是让复选框触发密码字段是否插入 DOM，而不仅仅是其可见性。

AngularJS 的伪实现：

<input type="checkbox" ng-model="createPassword">
<input ng-if="changePassword" type="password">

Answer 56

您可以在输入控件中使用 autocomplete = off 来避免自动完成

例如：

<input type=text name="test" autocomplete="off" />

如果上面的代码不起作用，那么也尝试添加这些属性

autocapitalize="off" autocomplete="off"

或者

将输入类型属性更改为type="search". Google 不会对具有某种搜索类型的输入应用自动填充。

Answer 57

我的解决方案是使用 Angular js 指令动态更改文本输入类型，它的工作原理就像魅力

首先添加 2 个隐藏的文本字段

只需添加一个像这样的角度指令

 (function () {

    'use strict';

    appname.directive('changePasswordType', directive);

    directive.$inject = ['$timeout', '$rootScope',  '$cookies'];

    function directive($timeout,  $rootScope, $cookies) {
        var directive = {
            link: link,
            restrict: 'A'
        };

        return directive;

        function link(scope,element) {
            var process = function () {
                var elem =element[0];
                elem.value.length > 0 ? element[0].setAttribute("type", "password") :
                element[0].setAttribute("type", "text");
            }

            element.bind('input', function () {
                process();
            });

            element.bind('keyup', function () {
                process();
            });
        }
    }
})()

然后在需要防止自动完成的文本字段中使用它

    <input type="text" style="display:none">\\can avoid this 2 lines
    <input type="password" style="display:none">
    <input type="text"  autocomplete="new-password" change-password-type>

注意：不要忘记包含 jquery，并设置type ="text"初始

Answer 58

可以这么说，我想要一些完全脱离浏览器的字段管理的东西。在这个例子中，有一个标准的文本输入字段来捕获密码——没有电子邮件、用户名等......

<input id='input_password' type='text' autocomplete='off' autofocus>

有一个名为“input”的变量，设置为空字符串...

var input = "";

现场事件由 jQuery 监控...

1. 在焦点上，字段内容和相关的“输入”变量总是被清除。
2. 在按键时，任何字母数字字符以及一些定义的符号都将附加到“输入”变量，并且字段输入被替换为项目符号字符。此外，当Enter按下键时，键入的字符（存储在“输入”变量中）通过 Ajax 发送到服务器。（请参阅下面的“服务器详细信息”。）
3. 在 keyup 上Home，End、 和Arrow键会导致“输入”变量和字段值被刷新。（我本可以喜欢箭头导航和焦点事件，并使用.selectionStart来确定用户单击或导航的位置，但不值得为密码字段付出努力。）此外，按下Backspace键会同时截断相应的变量和字段内容。

---

$("#input_password").off().on("focus", function(event) {
    $(this).val("");
    input = "";

}).on("keypress", function(event) {
    event.preventDefault();

    if (event.key !== "Enter" && event.key.match(/^[0-9a-z!@#\$%&*-_]/)) {
        $(this).val( $(this).val() + "•" );
        input += event.key;
    }
    else if (event.key == "Enter") {
        var params = {};
        params.password = input;

        $.post(SERVER_URL, params, function(data, status, ajax) {
            location.reload();
        });
    }

}).on("keyup", function(event) {
    var navigationKeys = ["Home", "End", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
    if ($.inArray(event.key, navigationKeys) > -1) {
        event.preventDefault();
        $(this).val("");
        input = "";
    }
    else if (event.key == "Backspace") {
        var length = $(this).val().length - 1 > 0 ? $(this).val().length : 0;
        input = input.substring(0, length);
    }
});

---

前端总结

从本质上讲，这使浏览器无法捕获任何有用的信息。即使它覆盖了自动完成设置，和/或显示带有先前输入值的下拉列表，它所拥有的只是为字段值存储的项目符号。

---

服务器详细信息（可选阅读）

如上所示，一旦服务器返回 JSON 响应，JavaScript 就会执行location.reload() 。（此登录技术用于访问受限制的管理工具。一些与 cookie 内容相关的过度杀伤力可以跳过以获得更通用的实现。）以下是详细信息：

• 当用户导航到该站点时，服务器会寻找合法的 cookie。
• 如果没有任何 cookie，则会显示登录页面。当用户输入密码并通过 Ajax 发送时，服务器会确认密码并检查用户的 IP 地址是否在授权 IP 地址列表中。
• 如果无法识别密码或 IP 地址，则服务器不会生成 cookie，因此当页面重新加载时，用户会看到相同的登录页面。
• 如果密码和 IP 地址都被识别，服务器会生成一个有效期为十分钟的 cookie，它还会存储两个与时间范围和 IP 地址对应的加扰值。
• 当页面重新加载时，服务器会找到 cookie 并验证加扰的值是否正确（即，时间范围与 cookie 的日期相对应，并且 IP 地址是否相同）。
• 每次用户与服务器交互时，无论是登录、显示数据还是更新记录，都会重复验证和更新 cookie 的过程。
• 如果 cookie 的值始终正确，则服务器会显示完整的网站（如果用户正在登录）或满足提交的任何显示或更新请求。
• 如果在任何时候 cookie 的值不正确，服务器会删除当前的 cookie，然后在重新加载时，重新显示登录页面。

Answer 59

轻松破解

将输入设为只读

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

超时后删除只读

$(function() {
    setTimeout(function() {
        $('input[name="name"]').prop('readonly', false);
    }, 50);
});

Answer 60

不幸的是，该选项在大多数浏览器中已被删除，因此无法禁用密码提示。

直到今天，我还没有找到解决这个问题的好方法。我们现在剩下的就是希望有一天这个选项会回来。

Answer 61

我遇到了同样的问题，今天 09/10/2019 我找到的唯一解决方案是这个

将 autocomplete="off" 添加到表单标签中。

在打开表单标签后放置 1 个错误输入。

<input id="username" style="display:none" type="text" name="fakeusernameremembered">

但它不适用于密码类型字段，请尝试

<input type="text" oninput="turnOnPasswordStyle()" placeholder="Enter Password" name="password" id="password" required>

在脚本上

function turnOnPasswordStyle() {
    $('#password').attr('type', "password");
}

这是在 Chrome-78、IE-44、Firefox-69 上测试的

Answer 62

自动填充功能在不选择字段的情况下更改值。我们可以在状态管理中使用它来忽略 select 事件之前的状态更改。

React中的一个例子：

import React, {Component} from 'react';

class NoAutoFillInput extends Component{

    constructor() {
        super();
        this.state = {
            locked: true
        }
    }

    onChange(event){
        if (!this.state.locked){
            this.props.onChange(event.target.value);
        }
    }

    render() {
        let props = {...this.props, ...{onChange: this.onChange.bind(this)}, ...{onSelect: () => this.setState({locked: false})}};
        return <input {...props}/>;
    }
}

export default NoAutoFillInput;

如果浏览器尝试填充该字段，则元素仍被锁定并且状态不受影响。现在您可以用 NoAutoFillInput 组件替换输入字段以防止自动填充：

<div className="form-group row">
    <div className="col-sm-2">
        <NoAutoFillInput type="text" name="myUserName" className="form-control" placeholder="Username" value={this.state.userName} onChange={value => this.setState({userName: value})}/>
    </div>
    <div className="col-sm-2">
        <NoAutoFillInput type="password" name="myPassword" className="form-control" placeholder="Password" value={this.state.password} onChange={value => this.setState({password: value})}/>
    </div>
</div>

当然，这个想法也可以用于其他 JavaScript 框架。

Answer 63

我今天找到的解决方案都没有带来真正的工作响应。

具有autocomplete属性的解决方案不起作用。

所以，这是我为自己写的：

<input type="text" name="UserName" onkeyup="if (this.value.length > 0) this.setAttribute('type', 'password'); else this.setAttribute('type', 'text');" >

您应该对您希望在页面上作为密码类型的每个输入字段执行此操作。

这有效。

干杯

Answer 64

很确定这是迄今为止最通用的解决方案

这也会停止自动完成和弹出建议框。

介绍

面对现实吧， autocomplete=off 或 new-password 似乎不起作用。它应该这样做，但它没有，每周我们都会发现其他事情发生了变化，并且浏览器正在填写一个表单，其中包含更多我们不想要的随机垃圾。我发现了一个非常简单的解决方案，不需要在登录页面上自动完成。

如何实施

第1步）。将相同的函数调用添加到用户名和密码字段的 onmousedown 和 onkeyup 属性，确保给它们一个 id 并在函数调用结束时记下代码。md=mousedown 和 ku=keyup

对于用户名字段，只添加一个值， 因为这可以防止表单在进入页面时自动填充。

例如：

<input type="text" value="&nbsp;" id="myusername" onmousedown="protectMe(this,'md')" onkeyup="protectMe(this,'ku')" />

第2步）。在页面中包含此功能

function protectMe(el,action){

 // Remove the white space we injected on startup
 var v = el.value.trim();
 
// Ignore this reset process if we are typing content in
// and only acknowledge a keypress when it's the last Delete
// we do resulting in the form value being empty
 if(action=='ku' && v != ''){return;} 

// Fix double quote issue (in the form input) that results from writing the outerHTML back to itself
  v = v.replace(/"/g,'\\"'); 
  
  // Reset the popup appearing when the form came into focus from a click  by rewriting it back
  el.outerHTML=el.outerHTML; 

  // Issue instruction to refocus it again, insert the value that existed before we reset it and then select the content.
  setTimeout("var d=document.getElementById('"+el.id+"'); d.value=\""+v+"\";d.focus();if(d.value.length>1){d.select();}",100);
}

它有什么作用？

• 首先，它在字段中添加了一个 空格，以便浏览器尝试查找与该字段相关的详细信息但没有找到任何内容，因此这是自动完成修复的
• 其次，当您单击时，将再次创建 HTML，取消弹出窗口，然后将值添加回选中状态。
• 最后，当您使用 Delete 按钮删除字符串时，弹出窗口通常会再次出现，但如果我们达到该点，则 keyup 检查会重复该过程。

有哪些问题？

• 单击选择一个字符是一个问题，但对于登录页面，大多数人会原谅它选择所有文本的事实
• Javascript 确实会修剪空格的任何输入，但您可能希望在服务器端也这样做以确保安全

可以更好吗？

很可能是。这只是我测试的东西，它满足了我的基本需求，但可能有更多的技巧可以添加或更好的方法来应用所有这些。

经测试的浏览器

截至本文发布日期，已在最新的 Chrome、Firefox、Edge 上测试并运行

Answer 65

在求助于创建自己的解决方案之前，我必须在这个讨论上花了两天时间：

首先，如果它适用于该任务，请放弃input并使用textarea. 据我所知，自动填充/自动完成在 a 中没有业务，textarea就我们想要实现的目标而言，这是一个很好的开始。现在您只需更改该元素的一些默认行为，使其表现得像input.

接下来，您需要将任何较长的条目保留在同一行，例如input，并且您需要textarea使用光标沿 y 轴滚动。我们还想摆脱调整大小框，因为我们正在尽最大努力模仿input不带有调整大小句柄的 的行为。我们通过一些快速的 CSS 实现了所有这些：

#your-textarea {
  resize: none;
  overflow-y: hidden;
  white-space: nowrap;
}

最后，您需要确保讨厌的滚动条不会破坏聚会（对于那些特别长的条目），因此请确保您的文本区域不显示它：

#your-textarea::-webkit-scrollbar {
  display: none;
}

十分简单。此解决方案的自动完成问题为零。

Answer 66

（它在 2021 年适用于 Chrome（v88、89、90）、Firefox、Brave 和 Safari。）

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

问题中提到的问题是由于 Chrome 的自动填充功能，这是 Chrome 在此错误链接中的立场 -问题 468153：autocomplete=off 在非登录 INPUT 元素上被忽略，评论 160

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

• [案例 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 也会做类似的事情，所有其他主要浏览器也是如此。2
• 在这种情况下，如果您真的想阻止用户查看管理密码的下拉菜单/查看安全生成的密码，您将不得不使用 JS 来切换输入类型，如本问题的其他答案中所述。

2关于关闭自动完成的详细 MDN 文档 -如何关闭表单自动完成

Answer 67

对于 Internet Explorer 11，有一个可用于阻止自动完成的安全功能。

它是这样工作的：

在用户输入之后在 JavaScript 中修改的任何表单输入值都被标记为不符合自动完成的条件。

此功能通常用于保护用户免受恶意网站的侵害，这些网站希望在您输入密码后更改您的密码等。

但是，您可以在密码字符串的开头插入一个特殊字符来阻止自动完成。稍后可以检测到此特殊字符并将其删除。

Answer 68

autocomplete = 'off' 对我不起作用，无论如何我将输入字段的 value 属性设置为空格<input type='text' name='username' value=" ">，即将默认输入字符设置为空格，并且由于用户名为空，因此密码也被清除。

Answer 69

提供的答案都不适用于我测试的所有浏览器。基于已经提供的答案，这就是我在Chrome 61、Microsoft Edge 40 (EdgeHTML 15)、IE 11、Firefox 57、Opera 49和Safari 5.1上得到的结果（测试） 。由于许多试验，它很古怪；但是它确实对我有用。

<form autocomplete="off">
    ...
    <input type="password" readonly autocomplete="off" id="Password" name="Password" onblur="this.setAttribute('readonly');" onfocus="this.removeAttribute('readonly');" onfocusin="this.removeAttribute('readonly');" onfocusout="this.setAttribute('readonly');" />
    ...
</form> 

<script type="text/javascript">
    $(function () {           
        $('input#Password').val('');
        $('input#Password').on('focus', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
    $('input#Password').on('keyup', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
    $('input#Password').on('keydown', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
</script>

Answer 70

固定的。只需在真实输入字段上方添加

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion - MDN https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908 - 中等在 EDGE、Chrome（最新 v63）、Firefox Quantum（57.0.4 64-бит）、Firefox（52.2.0）上测试，假字段是 chrome/opera 自动填充获取错误字段的解决方法

 const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}

 <input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />

<TextField
  name='userName'
  autoComplete='nope'
  ... 
/>

<TextField
      name='password'
      autoComplete='new-password'
      ... 
    />

Answer 71

我可以通过添加两个假输入并给它们绝对位置来阻止 Chrome 66 自动填充：

<form style="position: relative">
  <div style="position: absolute; top: -999px; left: -999px;">
    <input name="username" type="text" />
    <input name="password" type="password" />
  </div>
  <input name="username" type="text" />
  <input name="password" type="password" />

起初，我尝试添加display:none;输入，但 Chrome 忽略了它们并自动填充可见的。

Answer 72

这对我来说就像一个魅力。

1. 将表单的自动完成属性设置为关闭
2. 添加一个虚拟输入字段并将其属性也设置为关闭。

<form autocomplete="off">
 <input type="text" autocomplete="off" style="display:none">
</form>

Answer 73

我已经解决了在页面加载后放置此代码：

<script>
var randomicAtomic = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  $('input[type=text]').attr('autocomplete',randomicAtomic);
</script>

Answer 74

最简单的答案是

<input autocomplete="on|off">

但请记住浏览器支持。目前，自动完成属性支持

Chrome 17.0 和最新 IE 5.0 和最新
Firefox 4.0 和最新
Safari 5.2 和最新
Opera 9.6 和最新

Answer 75

我使用 jQuery 的解决方案。它可能不是 100% 可靠的，但它对我有用。这个想法在代码注释中描述。

    /**
 * Prevent fields autofill for fields.
 * When focusing on a text field with autocomplete (with values: "off", "none", "false") we replace the value with a new and unique one (here it is - "off-forced-[TIMESTAMP]"),
 * the browser does not find this type of autocomplete in the saved values and does not offer options.
 * Then, to prevent the entered text from being saved in the browser for a our new unique autocomplete, we replace it with the one set earlier when the field loses focus or when user press Enter key.
 * @type {{init: *}}
 */
var PreventFieldsAutofill = (function () {
    function init () {
        events.onPageStart();
    }

    var events = {
        onPageStart: function () {
            $(document).on('focus', 'input[autocomplete="off"], input[autocomplete="none"], input[autocomplete="false"]', function () {
                methods.replaceAttrs($(this));
            });
            $(document).on('blur', 'input[data-prev-autocomplete]', function () {
                methods.returnAttrs($(this));
            });
            $(document).on('keydown', 'input[data-prev-autocomplete]', function (event) {
                if (event.keyCode == 13 || event.which == 13) {
                    methods.returnAttrs($(this));
                }
            });
            $(document).on('submit', 'form', function () {
                $(this).find('input[data-prev-autocomplete]').each(function () {
                    methods.returnAttrs($(this));
                });
            });
        }
    };

    var methods = {
        /**
         * Replace value of autocomplete and name attribute for unique and save the original value to new data attributes
         * @param $input
         */
        replaceAttrs: function ($input) {
            var randomString = 'off-forced-' + Date.now();
            $input.attr('data-prev-autocomplete', $input.attr('autocomplete'));
            $input.attr('autocomplete', randomString);
            if ($input.attr('name')) {
                $input.attr('data-prev-name', $input.attr('name'));
                $input.attr('name', randomString);
            }
        },
        /**
         * Restore original autocomplete and name value for prevent saving text in browser for unique value
         * @param $input
         */
        returnAttrs: function ($input) {
            $input.attr('autocomplete', $input.attr('data-prev-autocomplete'));
            $input.removeAttr('data-prev-autocomplete');
            if ($input.attr('data-prev-name')) {
                $input.attr('name', $input.attr('data-prev-name'));
                $input.removeAttr('data-prev-name');
            }
        }
    };

    return {
        init: init
    }
})();
PreventFieldsAutofill.init();

.input {
  display: block;
  width: 90%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form action="#">
  <p>
    <label for="input-1">Firts name without autocomplete</label><br />
    <input id="input-1" class="input" type="text" name="first-name" autocomplete="off" placeholder="Firts name without autocomplete" />
  </p>
  <p>
    <label for="input-2">Firts name with autocomplete</label><br />
    <input id="input-2" class="input" type="text" name="first-name" autocomplete="given-name" placeholder="Firts name with autocomplete" />
  </p>
  <p>
    <button type="submit">Submit form</button>
  </p>
</form>

Answer 76

只需尝试将值为“off”的属性自动完成设置为输入类型。

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

Answer 77

<input type="text" name="attendees" id="autocomplete-custom-append">

<script>
  /* AUTOCOMPLETE */

  function init_autocomplete() {

    if (typeof ($.fn.autocomplete) === 'undefined') {
      return;
    }
    // console.log('init_autocomplete');

    var attendees = {
      1: "Shedrack Godson",
      2: "Hellen Thobias Mgeni",
      3: "Gerald Sanga",
      4: "Tabitha Godson",
      5: "Neema Oscar Mracha"
    };

    var countriesArray = $.map(countries, function (value, key) {
      return {
        value: value,
        data: key
      };
    });

    // initialize autocomplete with custom appendTo
    $('#autocomplete-custom-append').autocomplete({
      lookup: countriesArray
    });

  };
</script>

Answer 78

1. 将输入保留为文本类型并隐藏。
2. 在 DOMContentLoaded 上，调用更改密码类型并显示字段的函数，延迟为 1s。

document.addEventListener('DOMContentLoaded', changeInputsType);

function changeInputsType() {
    setTimeout(function() {
        $(/*selector*/).prop("type", "password").show();
    }, 1000);
}

Answer 79

在尝试了所有解决方案之后（有些解决了部分问题，禁用了自动填充但没有自动完成，有些根本不起作用），我发现截至 2020 年的最佳解决方案是将 type="search" 和 autocomplete="off" 添加到您的输入元素。像这样：

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

还要确保在表单元素上有 autocomplete="off"。这完美地工作并禁用自动完成和自动填充。

此外，如果您使用 type="email" 或任何其他文本类型，则需要添加 autocomplete="new-email" ，这将完全禁用两者。type="password" 也是如此。只需将“new-”前缀与类型一起添加到自动完成中。像这样：

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

Answer 80

我已经在这里发布了一个解决方案：禁用 Chrome 自动填充信用卡

解决方法是将自动完成属性设置为“cc-csc”，该值是信用卡的CSC，不允许存储它！（目前...）

autocomplete="cc-csc"

Answer 81

每次只需将元素中的name属性更改为唯一的属性，它就永远不会再次自动完成！input

一个例子可能是最后添加的时间 tic。您的服务器只需要解析文本的第一部分name来检索值。

<input type="password" name="password_{DateTime.Now.Ticks}" value="" />

Answer 82

多年来，我一直在与这场永无止境的战斗作斗争......所有的技巧和黑客最终都停止工作，就好像浏览器开发人员正在阅读这个问题一样。

我不想随机化字段名称、触摸服务器端代码、使用大量 JS 技巧，并希望将“hacks”保持在最低限度。所以这就是我想出的：

TL;DR使用input不带name或id根本不带的！并在隐藏字段中跟踪更改

<!-- input without the "name" or "id" -->
<input type="text" oninput="this.nextElementSibling.value=this.value">
<input type="hidden" name="email" id="email">

显然，适用于所有主要浏览器。

PS已知的小问题：

1. 您不能通过id或name不再引用此字段。但是你可以使用 CSS 类。或者$(#email').prev();在 jQuery 中使用。或者想出另一个解决方案（有很多）。
2. oninput当文本框值以编程方式更改时，onchange事件不会触发。因此，相应地修改您的代码以反映隐藏字段中的更改。

Answer 83

要禁用表单中文本的自动完成功能，请使用 和 元素的 autocomplete 属性。您需要此属性的“关闭”值。

这可以以完整形式或特定元素的形式完成：

1. 将 autocomplete="off" 添加到元素上以禁用整个表单的自动完成功能。
2. 为表单的特定元素添加 autocomplete="off"。

形式

<form action="#" method="GET" autocomplete="off">
</form>

输入

<input type="text" name="Name" placeholder="First Name" autocomplete="off">

Answer 84

name您可以在表单的地址属性中添加名称email并生成电子邮件值。例如：

<form id="something-form">
  <input style="display: none" name="email" value="randomgeneratevalue"></input>
  <input type="password">
</form>

如果您使用此方法，Google Chrome 将无法插入自动填充密码。

Answer 85

就autocomplete="off" list="autocompleteOff"在您为 IE/Edge 完成的输入和工作中！并为镀铬添加autocomplete="new password"

Answer 86

多年来，我一直在为自动完成而奋斗。我已经尝试了每一个建议，但对我没有任何帮助。通过 jQuery 2 属性添加效果很好：

$(document).ready( function () {
    setTimeout(function() {
        $('input').attr('autocomplete', 'off').attr('autocorrect', 'off');
    }, 10);
}); 

将导致 HTML

<input id="start_date" name="start_date" type="text" value="" class="input-small hasDatepicker" autocomplete="off" placeholder="Start date" autocorrect="off">

Answer 87

这适用于 Chrome 84.0.4147.105

1.为密码字段分配文本类型并添加一个类，例如“fakepasswordtype”

<input type="text" class="fakepasswordtype" name="password1">
<input type="text" class="fakepasswordtype" name="password2">

2.然后在第一次输入完成时使用jQuery将类型改回密码

jQuery(document).ready(function($) {
    $('.fakepasswordtype').on('input', function(e){
        $(this).prop('type', 'password');
    });
});

这阻止了 Chrome 的自动填充令人讨厌的丑陋行为。

Answer 88

Chrome 一直在尝试强制自动完成。因此，您需要做几件事。

输入字段的属性id，name不需要是可识别的。因此没有姓名、电话、地址等值。

相邻的标签或 div 也需要不可识别。但是，您可能想知道，用户如何知道？好吧，您可以::after使用content. 您可以将其设置为字母。

<label>Ph<span class='o'></span>ne</label>
<input id='phnbr' name='phnbr' type='text'>

<style>
  span.o {
    content: 'o';
  }
</style>

Answer 89

非常简单的解决方案只需更改标签名称和字段名称，而不是更通用的名称，例如：姓名、联系人、电子邮件。使用“邮寄至”而不是“电子邮件”。浏览器会忽略这些字段的自动完成功能。

Answer 90

定义输入的属性 type="text" 以及 autocomplete="off" 足以为我关闭自动完成功能。

除了 type="password"，我尝试使用 JavaScript 挂钩 onfocus/onfocusout 事件从其他人的建议切换只读属性工作正常，但是当密码字段编辑开始为空时，自动完成密码再次出现。

除了上述工作良好的解决方法之外，我建议使用 JavaScript 挂钩 oninput 事件来切换关于密码长度的类型属性。

<input id="pwd1" type="text" autocomplete="off" oninput="sw(this)" readonly onfocus="a(this)" onfocusout="b(this)" />
<input id="pwd2" type="text" autocomplete="off" oninput="sw(this)" readonly onfocus="a(this)" onfocusout="b(this)" />

和 JavaScript ..

function sw(e) {
    e.setAttribute('type', (e.value.length > 0) ? 'password' : 'text');
}
function a(e) {
    e.removeAttribute('readonly');
}
function b(e) {
    e.setAttribute('readonly', 'readonly');
}

Answer 91

我在包含用户名和电子邮件输入字段的表单上遇到问题，其中电子邮件就在用户名之后。Chrome 会自动将我当前的站点用户名填充到电子邮件字段中，并将重点放在该字段上。这并不理想，因为它是一种将新用户添加到 Web 应用程序的表单。

似乎如果您一个接一个地有两个输入，其中第一个在其标签或 ID 中包含术语“用户名”或用户名，而下一个在其标签或 ID 中包含单词电子邮件，chrome 将自动填充电子邮件字段。

为我解决这个问题的方法是将输入的 ID 更改为不包含这些单词。我还必须将标签的文本设置为空字符串，并使用 javascript settimeout 函数将标签更改回 0.01 秒后的应有状态。

setTimeout(function () { document.getElementById('id_of_email_input_label').innerHTML = 'Email:'; }, 10);

如果您在错误地自动填充任何其他输入字段时遇到此问题，我会尝试这种方法。

Answer 92

<input autocomplete="off" aria-invalid="false" aria-haspopup="false" spellcheck="false" />

我发现它适用于所有浏览器。当我只使用自动完成功能时，它不起作用，除非我结合了您看到的所有属性。我也从谷歌表单输入字段中得到了解决方案

Answer 93

不要使用 JAVASCRIPT 来解决这个问题！！

首先使用 HTML 解决此问题，以防浏览器不使用脚本、无法使用您的脚本版本或关闭脚本。始终在 HTML 之上最后一层层编写脚本。

1. 对于具有“文本”类型属性的常规输入表单字段，autocomplete="off"在元素上添加 。由于用户浏览器覆盖设置，这在现代 HTML5 浏览器中可能不起作用，但它可以处理许多旧浏览器并在大多数情况下停止自动完成下拉选项。请注意，我还包括了所有其他可能会激怒用户的自动完成选项，例如autocapitalize="off"、autocorrect="off"和spellcheck="false"。许多浏览器不支持这些，但它们添加了额外的“关闭”功能，这些功能会惹恼数据输入人员。请注意，例如，如果用户的浏览器设置为启用， Chrome 会忽略“关闭” 。autofill所以，实现浏览器设置可以覆盖这个属性。

   <input type="text" id="myfield" name="myfield" size="20" value="" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0 " placeholder="在这里输入一些东西..." title="输入一些东西" aria-label="Something" required="required" aria-required="true" />

2. 对于用户名和密码autocomplete字段，对于触发“关闭”功能的更具体的属性有一些有限的浏览器支持。autocomplete="username"用于登录的文本输入将强制某些浏览器重置并删除自动完成功能。autocomplete="new-password"将尝试做同样的事情用于使用“密码”类型输入字段的密码。（见下文）。但是，这些对特定浏览器来说是适当的，并且在大多数情况下都会失败。不支持这些功能的浏览器包括 Internet Explorer 1-11、许多 Safari 和 Opera 桌面浏览器，以及某些版本的 iPhone 和 Android 默认浏览器。但它们提供了额外的功能来尝试强制删除自动完成功能。

   <input type="text" id="username" name="username" size="20" value="" autocomplete="username" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0 " placeholder="在此处输入用户名..." title="输入用户名" aria-label="用户名" required="required" aria-required="true" />

   <input type="password" id="password" name="password" size="20" minlength="8" maxlength="12" pattern="(?=. \d)(?=. [az]) (?=.*[AZ]).{8,12}" value="" autocomplete="new-password" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="在此处输入密码..." title="输入密码：(8-12)个字符，必须包含一个数字，一个大写和小写字母" aria-label="Password" required="required" aria-required="true" />

现在寻求更好的解决方案！

由于标准机构和浏览器对 HTML5 的支持分裂，所有这些功能在许多现代浏览器和大多数旧浏览器中都失败了。因此，一些孩子转向编写脚本来填补漏洞。但那是懒惰的编程。使用JavaScript隐藏或重写 HTML会使事情变得更糟，因为您现在拥有层层的脚本依赖以及HTML 补丁。避免这种情况！

在表单和字段中永久禁用此功能的最佳方法是每次在“输入”元素上使用唯一值（例如与字段 ID 和名称连接的日期或时间）简单地创建自定义“id”/“name”值属性并确保它们匹配（例如“name=password_{date}”）。

<input type="text" id="password_20211013" name="password_20211013" />

这破坏了愚蠢的浏览器自动完成选择算法嗅探匹配的名称，触发这些字段的过去值。这样做，浏览器无法将以前表单数据的缓存与您的缓存相匹配。它将强制“自动完成”关闭，或显示一个空白列表，并且不会再显示任何以前的密码！在服务器端，您可以创建这些自定义输入“命名”字段，并且仍然可以通过简单地解析 id/name 的第一部分来识别并从来自用户浏览器的响应中提取正确的字段。例如“password_”或“username_”等。当输入字段的“name”值时，您只需解析第一部分（“password_{date}”）并忽略其余部分，然后在服务器上提取您的值。简单的！