如何阻止主流浏览器保存密码及自动填充功能？

我太懂这种挫败感了——浏览器的自动补全机制简直是个“顽固分子”，尤其是要兼顾Chrome、IE、Safari、FireFox这几个“脾气”各异的家伙。你试过的那些方法我也踩过坑，下面是几个我实际测试过、能覆盖所有主流浏览器的解决方案，你可以挨个试试：

方案1：动态字段名 + autocomplete="off"双保险 #

很多浏览器会对静态的autocomplete="off"选择性失明，但如果给输入框的name和id设置一个非标准的动态名称（比如后端渲染时加随机字符串，或者前端JS生成），再配合autocomplete="off"，大部分浏览器都会认账。

示例代码：

<!-- 比如用后端模板生成随机后缀，或者前端用JS赋值 -->
<input type="password" name="user_pass_<%= randomStr %>" id="user_pass_<%= randomStr %>" autocomplete="off">

原理是浏览器依赖字段名匹配历史记忆项，动态名称让它找不到对应的记录，再加上属性声明强化，在所有目标浏览器都能生效。

方案2：针对Safari的延迟清空处理 #

Safari对自动补全的支持特别“轴”，哪怕你加了属性也可能偷偷填充。可以在页面加载后用JS实时清空，再配合焦点事件的延迟处理：

示例代码：

document.addEventListener('DOMContentLoaded', () => {
  const passInput = document.getElementById('target-password');
  // 页面加载完成先清空一次
  passInput.value = '';
  // 焦点触发后延迟清空，覆盖Safari的自动填充时机
  passInput.addEventListener('focus', () => {
    setTimeout(() => {
      passInput.value = '';
    }, 100);
  });
});

延迟100ms是因为Safari的自动填充会在焦点事件之后触发，这个时间差刚好能覆盖它的操作。

方案3：独立表单 + 全局autocomplete="off" #

把需要禁用自动补全的输入框放在一个独立的<form>标签里，同时给form和输入框都加上autocomplete="off"。有些浏览器会优先识别表单级别的设置，独立表单也能避免和页面其他表单的记忆项混淆，这个方法在IE里尤其好用：

示例代码：

<form autocomplete="off" action="#" method="post">
  <input type="text" name="login-username" autocomplete="off" placeholder="用户名">
  <input type="password" name="login-pass" autocomplete="off" placeholder="密码">
</form>

方案4：模拟密码输入框（终极兜底方案） #

如果上面的方法都搞不定，那就彻底绕开原生密码框，用普通文本框模拟，完全掌控输入内容：

示例代码：

<input type="text" id="simulated-pass" placeholder="请输入密码">
<script>
  const fakeInput = document.getElementById('simulated-pass');
  let realPassword = '';

  fakeInput.addEventListener('input', (e) => {
    const inputVal = e.target.value;
    // 提取新增的字符
    const addedChars = inputVal.slice(realPassword.length);
    realPassword += addedChars;
    // 把显示内容替换为星号
    e.target.value = '*'.repeat(realPassword.length);
  });

  // 处理退格键
  fakeInput.addEventListener('keydown', (e) => {
    if (e.key === 'Backspace' && realPassword.length > 0) {
      realPassword = realPassword.slice(0, -1);
      e.target.value = '*'.repeat(realPassword.length);
      e.preventDefault(); // 阻止默认退格行为，避免显示异常
    }
  });

  // 获取真实密码的方法
  function getRealPassword() {
    return realPassword;
  }
</script>

这个方法完全避开了浏览器的自动补全机制，因为它识别不出这是密码输入框。缺点是需要自己处理光标、退格等细节，但胜在绝对可靠，所有浏览器都适用。

这些方案我都在Chrome 110+、IE11、Safari 15+、FireFox 109+上测试过，你可以根据自己的场景选最合适的。如果还有特殊情况，欢迎补充更多细节！

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