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

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

根据Mozilla开发者网络留档，布尔表单元素属性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 BETA
• Internet Explorer 8
• Chrome

我认为超文本标记语言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');

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

我终于找到了一个纯超文本标记语言解决方案，它不需要任何javascript，适用于现代浏览器（Internet Explorer除外；至少有一个捕获，对吧？），并且不需要您禁用整个表单的自动完成。

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

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

大多数主流浏览器和密码管理器（正确的，IMHO）现在忽略autocomplete=off。

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

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

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

Web开发人员应该做什么？

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

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

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

I haven't yet investigated IE or Firefox thoroughly but will be happy to update the answer if others have info in the comments.

有时偶数自动完成=关闭会在凭据中不妨碍填补进入错误的字段，但不是用户或昵称字段。

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

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

 <input type="password" readonlyonfocus="this.removeAttribute('readonly');"/>

更新时间：

移动Safari在字段中设置光标，但它不显示虚拟键盘。新的修复程序与以前一样工作，但它处理虚拟键盘：

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');// fix for mobile safari to show virtual keyboardthis.blur();    this.focus();  }" />

现场演示https://jsfiddle.net/danielsuess/n0scguv6/

//结束时间

因为浏览器会自动将凭据填充到错误的文本字段！？

我在Chrome和Safari上注意到这种奇怪的行为，当相同的形式。中有密码字段时，我猜浏览器会查找密码字段来插入您保存的凭据。然后它会自动填充（只是由于观察而猜测）最近的类似文本的输入字段，该字段出现在DOM中的密码字段之前。因为浏览器是最后一个实例，您无法控制它。

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

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

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

就这么简单，它在谷歌Chrome中也很有魅力！

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

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

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

这是修复。所有自动完成元素都是使用像这样的隐藏输入生成的：

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

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

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

这里提到的黑客都没有在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"不会削减它。

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

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

$(':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兼容，请使用普通自动完成='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上找到）：

在某些情况下，浏览器会继续提示自动完成值即使自动完成属性设置为off。这意外行为对于开发人员来说可能非常令人费解。真正的诀窍是强制不完成是为属性分配一个随机字符串像这样：

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

这就是它：

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

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

答案dsuess已发布与readOnly是非常聪明和工作。

但是当我使用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总是自动完成的数据，如果它发现一个框类型密码，刚刚足以表明该框autocomplete = "new-password"。

这对我很有效。

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

这对我有用。

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

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

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

为了确保用户每次都必须填写表单而不自动填写，我使用以下技术：

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

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

这是一个小提琴，演示了#2https://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>

下面是一个粗略的例子，说明使用razorasp.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">}

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

我在aspxtxtPassword.Attributes.Add("value", '');中使用这个TextMode="password" autocomplete="new-password"和in页面加载

除了

autocomplete="off"

使用

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

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

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

希望这有帮助。

提供的答案都不适用于我测试的所有浏览器。基于已经提供的答案，这是我最终得到的，（测试）在Chrome61、Microsoft Edge40（EdgeHTML 15）、ie11、Firefox 57、Opera 49和Safari5.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="new-password"正在唤醒，更多信息MDN文档

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

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion-MDNhttps://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} />
<TextFieldname='userName'autoComplete='nope'.../>
<TextFieldname='password'autoComplete='new-password'.../>

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

例如：

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

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

autocapitalize="off" autocomplete="off"

或

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

最佳解决方案：

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

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

工作在：

• Chrome：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

我的解决方案是使用角度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"

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

我能够通过添加两个假输入并给它们绝对位置来阻止Chrome66自动填充：

<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忽略它们并自动填充可见的输入。

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

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

请阅读这个文章以获取更多详细信息。

GoogleChrome忽略某些输入的autocomplete="off"属性，包括密码输入和通过名称检测到的常见输入。

例如，如果您有一个名称为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">

为了防止浏览器自动填写用户保存的站点登录凭据，请在表单顶部放置一个文本和密码输入字段，并设置非空值和样式“位置：绝对；顶部：-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-pass”应该有效。

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

始终工作的解决方案

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

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

希望它能帮助到其他人。

2022年更新：

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

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

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

不久前我也在尝试做同样的事情，但被难住了，因为我发现没有一个建议对我有用。结果是LastPass。

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

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

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

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

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

有一个名为“输入”的变量，设置为空字符串…

var input = "";

现场事件由jQuery监控…

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

$("#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，然后在重新加载时，导致登录页面被删除重新显示。

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

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

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

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

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

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

简单破解

使输入只读

<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我找到的唯一解决方案是这个

在表单标签中添加自动完成="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上进行了测试

最简单的答案是

<input autocomplete="on|off">

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

Chrome17.0&最新IE 5.0&最新
Firefox 4.0&最新
Safari5.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插件，可以做到这一点。这是链接 to jQuery插件及其工作原理。

代码片段：

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

在超文本标记语言中需要注意的一点是，密码字段是text类型，password类用于标识该字段：

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

我希望这能帮助某人。

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

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

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

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

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

这很有效。

欢呼

在您的输入中只需autocomplete="off" list="autocompleteOff"并为IE/Edge完成工作！对于chrome添加autocomplete="new password"

答案有很多，但大多数都是黑客或某种变通方法。

这里有三个案例。

案例一：如果这是您的标准登录表单。以任何方式将其关闭可能都很糟糕。如果您真的需要这样做，请仔细考虑。用户习惯于浏览器记住并存储密码。在大多数情况下，您不应该更改标准行为。

如果你仍然想这样做，请参阅案件三

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

使用

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

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

例如：登录，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);});

将导致超文本标记语言

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

这适用于Chrome84.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>

很确定这是目前最通用的解决方案

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

简介

让我们面对现实，自动完成=关闭或新密码似乎不起作用。它应该这样做，但它没有，每周我们发现其他东西发生了变化，浏览器正在填写表格，其中包含更多我们不想要的随机垃圾。我发现了一个非常简单的解决方案，不需要在登录页面上自动完成。

如何实施

步骤1）。为您的用户名和密码字段的onmousedown和onkeyup属性添加相同的函数调用，确保为它们提供ID并注意函数调用末尾的代码。md=mousedown和ku=keyup

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

例如：

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

Step 2). Include this function on the page

function protectMe(el,action){
// Remove the white space we injected on startupvar 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 emptyif(action=='ku' && v != ''){return;}
// Fix double quote issue (in the form input) that results from writing the outerHTML back to itselfv = v.replace(/"/g,'\\"');  
// Reset the popup appearing when the form came into focus from a click  by rewriting it backel.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);}

它有什么用？

• 首先，它向字段添加 空格，以便浏览器尝试找到与此相关的细节，但没有找到任何东西，所以自动完成固定
• 其次，当您单击时，将再次创建超文本标记语言，取消弹出窗口，然后将值添加回选中。
• 最后，当您使用Delete按钮删除字符串时，弹出窗口通常会再次出现，但如果我们达到该点，关键字检查会重复该过程。

问题是什么？

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

还能更好吗？

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

测试浏览器

测试并在最新的Chrome，Firefox，Edge上工作

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

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

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

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

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

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

很简单。这个解决方案没有自动完成问题。

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

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

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

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

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

此外，如果您使用type="email"或任何其他文本类型，您需要添加auto完成="new-email"，这将完美地禁用两者。类型="密码"也是如此。只需添加一个"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在这个bug链接中的立场-问题468153：在非登录的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]：inputtype是password
• 好吧，在这种情况下，不管你做了什么尝试，Chrome都会向你展示管理密码/使用现有密码的下拉菜单。Firefox也会做类似的事情，所有其他主要浏览器也是如此。2
• 在这种情况下，如果你真的想阻止用户看到下拉列表来管理密码/看到安全生成的密码，你将不得不使用JS来切换输入类型，如本问题的其他答案所述。

2关闭自动完成的详细MDN留档-如何关闭窗体自动完成

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

一个示例可能是在末尾添加的时间tic。您的服务器只需要解析文本name的第一部分即可检索回值。

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

Chrome一直试图强制自动完成。所以有几件事你需要做。

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

相邻的标签或div也需要不可识别。然而，您可能想知道，用户如何知道？好吧，您可以使用content对::after做一个有趣的小技巧。您可以将其设置为一个字母。

<label>Ph<span class='o'></span>ne</label><input id='phnbr' name='phnbr' type='text'>
<style>span.o {content: 'o';}</style>

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

太长别读

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

的细节

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

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

首先将id和姓名属性重命名为一些不会泄露您正在处理与地址相关的数据的内容。因此，不要使用<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而无法识别该字段！

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

当我自己尝试时，事情已经改变了旧的答案不再有效。

我确信它会工作的实现。我在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>元素。

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

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

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

示例：

<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. 对于用户名和密码输入类型字段，有一些有限的浏览器支持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="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让事情变得更糟隐藏或重写超文本标记语言，因为你现在有一层又一层的脚本依赖项加超文本标记语言补丁。避免这种情况！

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

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

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

放松！

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

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

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

太长别读使用没有name或id的input！并跟踪隐藏字段中的更改

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

定义输入的属性type="text"和auto完成="off"足以让我关闭自动完成。

除了类型="密码"之外，我尝试使用JavaScript挂钩从其他人的建议中切换只读属性，但当密码字段编辑开始为空时，自动完成密码再次出现。

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

<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”值。

这可以在for完整形式或特定元素中完成：

1. 在元素上添加自动完成="off"以禁用整个表单的自动完成。
2. 为表单的特定元素添加自动完成="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>

我四处寻找解决方案，但没有一个能在所有浏览器上正常工作。

我尝试了自动完成off，没有，没有，new_input_64，（甚至一些有趣的文本），因为自动完成属性期望传递一个字符串，不管是什么。

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

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

以下是表格：

<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，歌剧，边缘。

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

  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设置所有readonly。您仍然可以使用autocomplete属性作为后备。

这将解决这个问题

autocomplete="new-password"

2022年9月

一些浏览器，如GoogleChrome甚至不关心autocomplete属性的值。停止获取建议的最好方法是将输入的name属性更改为东西，从而更改时间到时间

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

所以我们可以使用otp作为字段名称。

<输入名称="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"/>