如何关闭HTML中密码输入框的自动补全功能？

由于现代浏览器对密码输入框的自动填充逻辑做了优化，单纯设置autocomplete="off"已经不再生效，以下是几个经过验证的可行方案：

方案1：使用autocomplete="new-password" #

这是HTML标准中专门为新密码输入场景设计的属性，大部分主流浏览器（Chrome、Firefox、Safari等）都支持，它会明确告诉浏览器：这是一个用于设置新密码的输入框，无需填充已保存的密码。

代码示例：

<input name="Password" id="Password" required autocomplete="new-password"/>

方案2：添加隐藏的假输入框拦截自动填充 #

利用浏览器优先填充页面中第一个匹配类型输入框的特性，在真实密码框前添加两个隐藏的假输入框，让浏览器的自动填充逻辑作用在假框上，从而避免真实密码框被填充。

代码示例：

<!-- 隐藏的假输入框，用于拦截自动填充 -->
<input type="text" style="position: absolute; left: -9999px; top: -9999px;" autocomplete="on">
<input type="password" style="position: absolute; left: -9999px; top: -9999px;" autocomplete="on">

<!-- 真实的密码输入框 -->
<input name="Password" id="Password" required autocomplete="off"/>

这里用绝对定位把假框移出可视区域，比display: none更稳妥，部分浏览器会忽略display: none的元素。

方案3：动态修改输入框类型（JavaScript方案） #

通过延迟修改输入框的类型，避开浏览器的自动填充时机：页面加载时先将密码框设为普通文本框，短暂延迟后再改回密码框，这样浏览器的自动填充逻辑不会触发。

原生JavaScript代码示例：

document.addEventListener('DOMContentLoaded', function() {
  const passwordInput = document.getElementById('Password');
  passwordInput.type = 'text';
  setTimeout(() => {
    passwordInput.type = 'password';
  }, 100);
});

如果你的项目使用jQuery，也可以这样写：

$(document).ready(function() {
  $('#Password').attr('type', 'text');
  setTimeout(() => {
    $('#Password').attr('type', 'password');
  }, 100);
});

兼容性提示 #

不同浏览器的自动填充逻辑存在差异，建议结合方案1和方案2使用，能覆盖更多场景。

内容的提问来源于stack exchange，提问作者behin gostar