HTML 中禁用浏览器自动填充密码输入框的兼容性解决方案

问题背景

在浏览器中提交表单后，浏览器通常会提示用户“是否需要记住密码”，确认后会在下次提交表单时自动填充某些输入框。然而，在提现、充值等敏感操作页面中，自动填充密码可能带来安全隐患，因此需要采取手段阻止浏览器自动填充。

常见尝试与局限

使用 autocomplete="off"

由于自动填充是浏览器自身实现的功能，autocomplete 属性并未被 W3C 规范强制要求，许多浏览器会直接忽略该属性，因此无法可靠禁用自动填充。

通过 JavaScript 清空输入框

在页面加载时使用 JavaScript 将 input 的 value 设置为空，但浏览器的自动填充行为发生在 JavaScript 执行之后，因此这种方法无法解决问题。

增加隐藏的密码输入框

网上流传的一种方法是在目标输入框前增加一个隐藏的密码输入框，这在大部分浏览器版本中有效，但在某些高版本浏览器和 Safari 中失效。

<!-- 额外增加的 input -->
<input type="password" />
<!-- 原先的 input -->
<input type="password" />

增加隐藏的 form

此方法解决了 Safari 下的自动填充问题，但在高版本 Chrome 中可能失效（经测试 Chrome 46.0 可行，Chrome 47.0 失效）。

<!-- 额外增加的 form 和 input -->
<form>
  <input type="password" />
</form>
<!-- 原先的 input -->
<input type="password" />

最终解决方案

结合上述两种方法，可以解决 Chrome 47.0 下的自动填充问题。具体实现如下：

<!-- 额外增加的内容 -->
<form>
  <input type="password" />
</form>
<input type="password" />
<!-- 原先的 input -->
<input type="password" />

需要注意的是，与目标 input 同辈的隐藏 input 不能使用 display:none，否则在 Chrome 47.0 上仍会触发自动填充，因此只能通过其他方式（如设置宽高为 0、浮动、隐藏可见性）来隐藏。

总结

采用最终方案后，在多个浏览器中测试运行良好，未再出现自动填充现象。前端兼容性问题确实令人困扰，但通过组合策略可以有效解决。