autocomplete=off属性失效，求可行解决方案

我太懂你这种挫败感了——现代浏览器为了帮用户省时间，经常会无视autocomplete="off"，尤其是用户名和密码这类敏感字段，哪怕你把属性加在表单和字段上都没用。结合我自己踩过的坑和社区里的实践，给你分享几个靠谱的解决办法：

1. 用autocomplete="new-password"+自定义字段名 #

浏览器对new-password的识别优先级更高，但如果你的字段name/id是username、password这种通用名称，浏览器还是会“自作主张”。所以可以给字段换个不常见的命名，比如：

<form class="form-horizontal" name="form1" id="form1" action="test.php" method="post" autocomplete='off'>
  <input type="text" name="user_login_xyz" id="user_login_xyz" autocomplete="off">
  <input type="password" name="user_pwd_xyz" id="user_pwd_xyz" autocomplete="new-password">
</form>

这种方法能避开浏览器对通用字段名的自动填充规则。

2. 添加隐藏的“诱饵”字段 #

这是社区里流传很久的trick：在真实字段前加几个隐藏的假字段，让浏览器把自动填充的内容“浪费”在诱饵上，真实字段就不会被填充了。代码示例：

<form class="form-horizontal" name="form1" id="form1" action="test.php" method="post" autocomplete='off'>
  <!-- 诱饵字段：必须放在真实字段前面，用display:none隐藏 -->
  <input type="text" name="fake_uname" id="fake_uname" autocomplete="off" style="display: none;">
  <input type="password" name="fake_pwd" id="fake_pwd" autocomplete="off" style="display: none;">

  <!-- 真实输入字段 -->
  <input type="text" name="username" id="username" autocomplete="off">
  <input type="password" name="password" id="password" autocomplete="off">
</form>

注意：别用visibility:hidden，必须用display:none或者把字段定位到视野外，不然浏览器可能还是会识别到。

3. 动态切换密码字段类型 #

页面加载时先把密码字段设为type="text"，等用户点击聚焦时再改成password，打浏览器一个措手不及：

<form class="form-horizontal" name="form1" id="form1" action="test.php" method="post" autocomplete='off'>
  <input type="text" name="username" id="username" autocomplete="off">
  <input type="text" id="password" autocomplete="off">
</form>
<script>
document.getElementById('password').addEventListener('focus', function() {
  this.type = 'password';
});
// 可选：失去焦点时再改回text，进一步防止自动填充
document.getElementById('password').addEventListener('blur', function() {
  this.type = 'text';
});
</script>

4. 结合多种方法叠加效果 #

如果单个方法不好使，建议把上面的方法结合起来——比如诱饵字段+自定义字段名+new-password，多管齐下，几乎能覆盖所有主流浏览器的情况。

另外要提醒一句：不同浏览器的自动填充逻辑略有差异，比如Chrome和Firefox对字段的识别规则不一样，所以最好在目标浏览器里测试一下效果。

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