不要使用JAVASCRIPT修复此问题！！

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

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

例子：

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

对于用户名和密码输入类型字段，对于触发“关闭”功能的更具体的自动完成属性，浏览器的支持有限。用于登录的文本输入上的autocomplete=“username”将迫使某些浏览器重置并删除自动完成功能。autocomplete=“new password”将尝试使用“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隐藏或重写HTML会使情况变得更糟，因为您现在有一层又一层的脚本依赖关系，再加上HTML补丁。避免这种情况！

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

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

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

容易的

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找到一个密码类型的框，它总是自动完成数据，这足以表明该框的自动完成=“新密码”。

这对我很有用。

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

这就是：

函数turnOnPasswordStyle（）{$（'#inputpassword'）.attr（'type'，“password”）；}<input-onput=“turnOnPasswordStyle（）”id=“inputpassword”type=“text”>

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

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

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

<!-- html -->
<input id="inputID" onfocus="this.readOnly = false;" ontouchstart="this.readOnly = false;" onblur="this.readOnly = true;" />

More

javascript和jQuery版本

（它在2021适用于Chrome（v88、89、90）、Firefox、Brave和Safari。）这里已经写过的旧答案将经过反复尝试，但大多数他们没有链接到任何官方文档或Chrome对此的评论课题

问题中提到的问题是因为Chrome的自动填充功能，这是Chrome在这个bug链接中的立场-问题468153：autocomplete=off在非登录INPUT元素上被忽略，注释160

简单地说，有两种情况-

[案例1]：您的输入类型不是密码。在这种情况下，解决方案很简单，有三个步骤。将name属性添加到输入name不应以电子邮件或用户名之类的值开头。否则Chrome仍然会显示下拉列表。例如，name=“emailToDelete”显示下拉列表，但name=“to delete email”不显示。这同样适用于autocomplete属性。添加autocomplete属性，并添加一个对您有意义的值，如新字段名

它将看起来像这样，并且在您的余生中不会再次看到该输入的自动填充-

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

[案例2]：输入类型为密码好吧，在这种情况下，无论您的试用如何，Chrome都会向您显示管理密码/使用现有密码的下拉列表。Firefox也会做一些类似的事情，其他所有主要浏览器也是如此。2.在这种情况下，如果你真的想阻止用户看到下拉列表来管理密码/看到安全生成的密码，你就必须使用JS来切换输入类型，正如这个问题的其他答案中提到的那样。

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