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

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

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

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

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

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

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

这将在 Internet Explorer 和 Mozilla Firefox 中起作用。缺点是它不是XHTML标准。

只需设置.这样做有一个很好的理由：您希望提供自己的自动完成功能！autocomplete="off"

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

“如果您是上述表单的用户并希望重新启用 自动完成功能，使用“记住密码” 书签 来自此书签 页面。它删除了 页面上所有表单中的所有属性。保持 打好仗！autocomplete="off"

我们确实将 sasb 的想法用于一个站点。

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

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

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

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

提交表单后，您可以先去除该部分，然后在服务器端进行处理。这将阻止 Web 浏览器查找字段的上下文，还可能有助于防止 XSRF 攻击，因为攻击者无法猜测表单提交的字段名称。

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

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

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

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

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

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

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

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

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

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

添加

autocomplete="off"

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

测试于：

• Firefox 3.5、4 测试版
• IE浏览器 8
• 铬

我认为在 HTML 5 中受支持。autocomplete=off

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

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

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

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

首先要提到的是，未在登录表单字段上显式禁用自动完成是 PCI-DSS 失败。此外，如果用户的本地计算机遭到入侵，则攻击者可以轻而易举地获取任何自动完成数据，因为它是以明文形式存储的。

可用性当然是有争论的，但是当涉及到哪些表单字段应该禁用自动完成，哪些不应该禁用时，有一个非常微妙的平衡。

您可以在 中使用它。input

例如;

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

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

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

三个选项：

第一：

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

第二：

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

第三（JavaScript 代码）：

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

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

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

只需关闭自动完成功能，然后将其打开即可在表单中工作。例如：forminput

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

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

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

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

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

Web 开发人员要做什么？

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

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

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

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

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

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

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

 <input type="password" readonly
     onfocus="this.removeAttribute('readonly');"
     onblur="this.setAttribute('readonly', true);"/>

更新：

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 中的密码字段之前。由于浏览器是最后一个实例，您无法控制它。

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

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

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

就这么简单，它在 Google Chrome 中也像魅力一样工作！

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

在 2 个请求之间设置不同的输入名称将解决问题（但仍将保存在浏览器的缓存中，并且还会增加浏览器的缓存）。

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

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

<?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 变量：（演示)

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'];

浏览器将无法从先前的请求或以前的用户那里建议信息。

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

这里提到的黑客在 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>

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

ismxfilled="0"为OFF

或

ismxfilled="1"为ON

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

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

Safari 不会改变对自动完成的想法，如果您从 JavaScript 动态设置。但是，如果您按字段执行此操作，它将受到尊重。autocomplete="off"

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

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

Chrome 正计划支持此功能。

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

Chrome 讨论

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

为了与 Firefox 兼容，请使用正常的 autocomplete='off'

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

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

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

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

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

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>

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

在某些情况下，浏览器会不断建议自动完成值 即使“自动完成”属性设置为“关闭”。这个意想不到的 对于开发人员来说，行为可能非常令人费解。真正的诀窍 强制不完成是给属性分配一个随机字符串 这样：

autocomplete="nope"

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

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

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

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

<!-- 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 中，将任何类型为 password 的输入放在实际输入之前就足够了，但 Chrome 看穿了这一点，并迫使我实际命名假密码输入（通过给它一个明显的密码 ID）让它“咬人”。我使用一个类来实现样式，而不是使用嵌入式样式，所以如果上述方法由于某种原因不起作用，请尝试这样做。

所以这里是这样的：

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

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

使用只读发布的答案非常聪明且有效。

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

因此，我有一个想法，将其实现到jQuery解决方案中：

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

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

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

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

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

我使用以下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();

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

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

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

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

AngularJS 的伪实现：

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

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

它的工作原理如下：

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

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

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

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 找到一个 password 类型的框，它总是会自动完成数据，刚好足以指示该框。autocomplete = "new-password"

这对我来说效果很好。

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

这对我有用。

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

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

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

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

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

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

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

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 与 razor 一起使用的服务器代码将促进 #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">
}

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

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

除了

autocomplete="off"

用

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

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

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

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

提供的答案都不适用于我测试的所有浏览器。在已经提供的答案的基础上，这就是我最终在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>

许多现代浏览器不再支持登录字段的 autocomplete=“off”。 是 wokring 相反，更多信息 MDN 文档autocomplete="new-password"

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

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 Autofill获取错误字段的解决方法

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

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

例如：

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

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

autocapitalize="off" autocomplete="off"

或

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

最佳解决方案：

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

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

工作于：

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

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

我的解决方案是使用 angular js 指令动态更改文本输入类型 它像魅力一样工作

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

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

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

没有虚假的输入，没有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 来防止这种情况。

我能够通过添加两个假输入并赋予它们绝对位置来阻止 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" />

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

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

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

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

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

例如，如果您的输入内容为 name ，则 Chrome 会根据在其他网站上输入的地址提供自动填充建议，即使您告诉它不要：address

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

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

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

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

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

为防止浏览器自动填充用户保存的站点登录凭据，请在表单顶部放置一个文本和密码输入字段，该字段具有非空值，样式为“position： absolute;顶部：-999px;left：-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>

始终有效的解决方案

我已经通过使用随机字符解决了与 Google Chrome 的无休止的战斗。当你总是用随机字符串渲染自动完成时，它永远不会记住任何事情。

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

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

2022年更新：

Chrome 进行了以下改进：这将解决它，但我不确定，如果 Chrome 在一段时间后再次将其更改为不同的功能。autocomplete="new-password"

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

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

不久前，我试图做同样的事情，但被难住了，因为我发现没有一个建议对我有用。原来是.LastPass

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

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

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

可以这么说，我想要一些能够完全摆脱浏览器控制现场管理的东西。在此示例中，只有一个标准文本输入字段用于捕获密码 - 没有电子邮件、用户名等......

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

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

var input = "";

字段事件由 jQuery 监控...

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

$("#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 地址都被识别，服务器会生成一个 具有 10 分钟生命周期的 cookie，它还存储两个与时间帧和 IP 地址相对应的加扰值。
• 当页面重新加载时，服务器会找到 cookie 并验证 加扰的值是正确的（即，时间范围与cookie的日期相对应，并且IP地址相同）。
• 每次用户与服务器交互时，都会重复验证和更新 cookie 的过程，无论他们是登录、显示数据还是更新记录。
• 如果 cookie 的值始终正确，则服务器会显示完整的网站（如果用户正在登录）或完成提交的任何显示或更新请求。
• 如果在任何时候 cookie 的值不正确，服务器会删除当前 cookie，然后在重新加载时导致登录页 重新显示。

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

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

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

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

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

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

轻松破解

将输入设置为只读

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

超时后删除只读

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

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

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

我解决了在页面加载后放置此代码的问题：

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

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

将 autocomplete=“off” 添加到表单标记中。

打开 Form Tag 后输入 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 上测试的

最简单的答案是

<input autocomplete="on|off">

但请记住浏览器支持。目前，autocomplete 属性由

Chrome 17.0 及最新版本 IE 5.0 & 最新
版 Firefox 4.0 & 最新版 Safari 5.2 & 最新版 Opera 9.6 & 最新

版

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

我尝试了几乎所有的答案，但新版本的 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");
})

这是最简单的方法，可以解决窗体上任意数量的控件。

截至2019年12月：

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

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

根据Mozilla Dev Network（MDN）关于如何关闭表单自动完成的帖子

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

在同一篇文章中，他们讨论了财产的使用及其局限性。众所周知，并非所有浏览器都像我们所希望的那样尊重此属性。autocmplete

溶液

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

代码片段：

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

在 HTML 中需要注意的一点是，密码字段的类型是 text，并且应用了 class 来标识该字段：password

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

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

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

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

自动填充功能可在不选择字段的情况下更改值。我们可以在状态管理中使用它来忽略 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 框架一起使用。

我目前发现的解决方案都没有带来真正的工作响应。

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

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

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

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

这很有效。

干杯

只是在您为 IE/Edge 所做的输入和工作中！对于 chrome 添加autocomplete="off" list="autocompleteOff"autocomplete="new password"

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

这里有三个案例。

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

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

案例二：当这不是您的常规登录表单，但输入的属性不是“类似”电子邮件、登录名、用户名、user_name、密码时。nameid

用

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

案例三：当这不是您的常规登录表单，但输入的属性是“类似”电子邮件、登录名、用户名、user_name、密码时。nameid

例如： 登录名、abc_login、密码、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

多年来，我一直在努力实现自动完成。我尝试了每一个建议，但没有任何建议对我有用。 通过 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">

这适用于 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 自动填充的令人讨厌的丑陋行为。

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

可以肯定的是，这是迄今为止最通用的解决方案

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

介绍

让我们面对现实吧，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，取消弹出窗口，然后将值添加回选中状态。
• 最后，当您使用“删除”按钮删除字符串时，弹出窗口通常会再次出现，但是如果我们达到该点，则键向上检查会重复该过程。

存在哪些问题？

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

可以更好吗？

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

经过测试的浏览器

截至本文发布日期，已在最新的 Chrome、Firefox、Edge 上进行测试和工作

在创建自己的解决方案之前，我一定花了两天时间进行讨论：

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

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

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

最后，你要确保讨厌的滚动条不会破坏派对（对于那些特别长的条目），所以要确保你的文本区域没有显示它：

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

简单易行。使用此解决方案时，我们没有遇到任何自动完成问题。

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

document.addEventListener('DOMContentLoaded', changeInputsType);

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

在尝试了所有解决方案后（有些部分有效，禁用自动填充但不能自动完成，有些根本不起作用），我发现截至 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" />

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

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

autocomplete="cc-csc"

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

这里已经写过的旧答案可以通过反复试验来工作，但大多数 它们没有链接到任何官方文档或Chrome对此的看法 事。

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

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

• [案例 1]：您的类型不是 。在这种情况下，解决方案很简单，有三个步骤。inputpassword

• 将属性添加到nameinput

• name不应以 email 或 username 等值开头。否则，Chrome 最终仍会显示下拉列表。例如，显示下拉列表，但不显示。这同样适用于属性。name="emailToDelete"name="to-delete-email"autocomplete

• 添加属性，并添加一个对你有意义的值，例如autocompletenew-field-name

它看起来像这样，在你的余生中，你不会再看到这个输入的自动填充——

  <input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />

• [案例 2]：是inputtypepassword
• 好吧，在这种情况下，无论您的试用情况如何，Chrome都会向您显示管理密码/使用现有密码的下拉列表。Firefox也会做类似的事情，所有其他主要浏览器也是如此。阿拉伯数字
• 在这种情况下，如果您真的想阻止用户看到管理密码的下拉列表/查看安全生成的密码，您将不得不使用 JS 来切换输入类型，如本问题的其他答案中所述。

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

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

例如，在末尾添加时间抽搐。您的服务器只需要解析文本的第一部分即可取回值。name

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

Chrome 一直试图强制自动完成。因此，您需要做一些事情。

输入字段的属性，并且不需要可识别。所以没有名字、电话、地址等值。idname

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

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

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

这是截至 2021 年 5 月在所有浏览器中都适用的完美解决方案！

TL;博士

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

细节

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

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

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

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

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

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

现在情况发生了变化，因为我自己尝试过，旧的答案不再有效。

我相信它会起作用的实现。我在 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"

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

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

首先使用 HTML 来解决此问题，以防浏览器未使用脚本、无法使用您的脚本版本或关闭脚本。始终将脚本 LAST 分层在 HTML 之上。

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

例：

<input type="text" id="myfield" name="myfield" size="20" value="" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter something here..." title="Enter Something" aria-label="Something" required="required" aria-required="true" />

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

例：

<input type="text" id="username" name="username" size="20" value="" autocomplete="username" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter username here..." title="Enter Username" aria-label="Username" required="required" aria-required="true" />

<input type="password" id="password" name="password" size="20" minlength="8" maxlength="12" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}" value="" autocomplete="new-password" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter password here..." title="Enter Password: (8-12) characters, must contain one number, one uppercase and lowercase letter" aria-label="Password" required="required" aria-required="true" />

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

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

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

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

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

容易！

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

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

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

TL;DR 使用没有或根本没有！并跟踪隐藏字段中的更改inputnameid

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

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

P.S. 已知的小问题：

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

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

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

除了上述有效的解决方法外，我还建议使用 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');
}

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

这可以在完整表单或特定元素中完成：

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

形式

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

输入

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

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

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

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

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

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

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

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

浏览器忽略只读字段上的 autocomlete。此代码使所有可写文件成为只读，直到它被聚焦。

$(_=>{$('form[autocomplete=off] [name]:not([readonly])').map((i,t)=>$(t).prop('autocomplete',t.type=='password'?'new-password':'nope').prop('readonly',!0).one('focus',e=>$(t).prop('readonly',!1)));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" autocomplete="off">
<input name="user" id="user" required class="form-control" />
<label class="form-label" for="user">New User</label>
<hr>
<input type="password" name="pass" id="pass" minlength="8" maxlength="20" />
<label class="form-label" for="pass">New Passwort</label>
</form>

我一直在寻找解决这个问题的方法，但它们都没有在所有浏览器上都能正常工作。

我尝试了自动完成关闭，无，不，new_input_64，（甚至一些有趣的文本），因为autoComplete属性无论如何都需要传递一个字符串。

经过多次搜索和尝试，我找到了这个解决方案。

我更改了所有类型并添加了一些简单的CSS代码。inputtext

表格如下：

<form class="row gy-3">
  <div class="col-md-12">
    <label for="fullname" class="form-label">Full Name</label>
    <input type="text" class="form-control" id="fullname" name="fullname" value="">
  </div>
  <div class="col-md-6">
    <label for="username" class="form-label">User Name</label>
    <input type="text" class="form-control" id="username" name="username" value="">
  </div>
  <div class="col-md-6">
    <label for="email" class="form-label">Email</label>
    <input type="text" class="form-control" id="email" name="email" value="">
  </div>
  <div class="col-md-6">
    <label for="password" class="form-label">Password</label>
    <input type="text" class="form-control pswd" id="password" name="password" value="">
  </div>
  <div class="col-md-6">
    <label for="password" class="form-label">Confirm Password</label>
    <input type="text" class="form-control pswd" id="password" name="password" value="">
  </div>
  <div class="col-md-12">
    <label for="recaptcha" class="form-label">ReCaptcha</label>
    <input type="text" class="form-control" id="recaptcha" name="recaptcha" value="">
  </div>
</form>

隐藏密码的CSS代码：

.pswd {
    -webkit-text-security: disc;
}

在 Chrome、Opera、Edge 上测试。

由于在不同的浏览器和版本上的行为几乎是不可预测的，因此我的方法有所不同。为要禁用自动填充属性的所有输入元素提供属性，并且仅在焦点上禁用它。autocompletereadonly

  document.addEventListener('click', (e) => {
    readOnlys.forEach(readOnly => {
      if (e.target == readOnly) {
        readOnly.removeAttribute('readonly', '');
        readOnly.style.setProperty('pointer-events', 'none');
      } else {
        readOnly.setAttribute('readonly', '');
        readOnly.style.setProperty('pointer-events', 'auto');
      }
    });
  });
  document.addEventListener('keyup', (e) => {
    if (e.key == 'Tab') {
      readOnlys.forEach(readOnly => {
        if (e.target == readOnly) {
          readOnly.removeAttribute('readonly', '');
          readOnly.style.setProperty('pointer-events', 'none');
        } else {
          readOnly.setAttribute('readonly', '');
          readOnly.style.setProperty('pointer-events', 'auto');
        }
      });
    }
  });

如果要确保用户在禁用 JS 后仍然可以访问这些字段，您可以在页面加载时通过 JS 最初设置所有 s。您仍然可以将该属性用作回退。readonlyautocomplete

这将解决此问题

autocomplete="new-password"

2022年9月

某些浏览器（例如Google Chrome）甚至不关心属性的值。停止获取建议的最佳方法是将输入的 name 属性更改为不时更改的内容autocomplete

自 2022 年 9 月起，浏览器将不再提供一次性密码的自动完成功能

因此，我们可以将其用作字段名称。otp

<input name=“otp”>

此问题只需要自动完成属性 您可以访问此页面了解更多信息

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

对于 React，你可以尝试将这段代码放在表单下或密码输入上方，或者放在电子邮件和密码输入之间

export const HackRemoveBrowsersAutofill = () => (
  <>
    <input type="email" autoComplete="new-password" style={ { display: 'none' } } />
    <input type="password" autoComplete="new-password" style={ { display: 'none' } } />
  </>
)

其中一个例子：

<input type="email"/>
<HackRemoveBrowsersAutofill/>
<input type="password"/>

不幸的是，问题还在继续......而且主要浏览器似乎没有执行任何操作，甚至最糟糕的是，某些操作只是针对任何解决方案完成的。选项：

autocomplete=“新密码”

现在在某些浏览器上不起作用，因为自动完成是使用密码生成器完成的（这会使用户感到困惑，因为值是隐藏的）。

对于某些空输入字段，明确显示大小写

类型=“url”

避免不正确的自动补全真的很复杂，但是牢不可破的空格而不是空值可以解决问题（空格不行）......以表单中包含的一些垃圾为代价（其中有一天浏览器也会自动完成）

非常难过。

这对我有用：

1-添加到元素上。autocomplete="off"<form>

2-添加隐藏with作为表单的第一个子元素。<input>autocomplete="false"display: none

<form autocomplete="off" method="post" action="">
    <input autocomplete="false" name="hidden" type="text" style="display:none;">
    ...

在 2023 年对我有用的组合（在 Chrome 浏览器中检查）：

<input
   name='nm-0.239458' // generated with `nm-${ Math.random() }`
   placeholder='Nаme' // where 'а' is cyrilic, it looks exactly like latin 'a'
/>