关闭管理表单自动补全：Firefox浏览器异常问题求助

我之前也碰到过Firefox这个顽固的自动补全问题——明明按MDN要求加了autocomplete="off"和autocomplete="new-password"，它还是把管理后台的用户字段当成登录表单来填充，搞得管理员一头雾水。分享几个亲测有效的解决办法：

方案1：给单个字段强制设置autocomplete="off" #

有时候表单层面的autocomplete="off"会被Firefox忽略，尤其是它判定为“登录相关”的字段（比如email、password）。我们可以给这些字段单独加上这个属性，双重保险：

<form action="" method="post" autocomplete="off">
  <input id="id_first_name" name="first_name" type="text">
  <label for="id_first_name">First Name</label>
  <input id="id_last_name" name="last_name" type="text">
  <label for="id_last_name">Last Name</label>
  <input id="id_raw_password" name="raw_password" autocomplete="off new-password" type="password">
  <label for="id_raw_password">New Password (The current password is not displayed here.)</label>
  <input id="id_email" name="email" type="email" autocomplete="off">
  <label for="id_email">Email address</label>
  <!-- 其他用户资料字段 -->
</form>

这里给密码字段同时保留new-password（避免浏览器提示弱密码）和off，邮箱字段直接加autocomplete="off"，明确告诉Firefox不要碰这些字段。

方案2：添加“诱饵”隐藏字段 #

这是个有点取巧但非常有效的方法：在真实字段之前插入几个隐藏的、name和登录表单相似的输入框，让Firefox把自动补全的内容填到这些诱饵里，不会干扰真实的管理字段：

<form action="" method="post" autocomplete="off">
  <!-- 诱饵字段，必须在真实字段前面 -->
  <input type="email" name="email" autocomplete="off" style="position: absolute; left: -9999px;">
  <input type="password" name="password" autocomplete="off" style="position: absolute; left: -9999px;">

  <input id="id_first_name" name="first_name" type="text">
  <label for="id_first_name">First Name</label>
  <input id="id_last_name" name="last_name" type="text">
  <label for="id_last_name">Last Name</label>
  <input id="id_raw_password" name="raw_password" autocomplete="new-password" type="password">
  <label for="id_raw_password">New Password (The current password is not displayed here.)</label>
  <input id="id_email" name="email" type="email">
  <label for="id_email">Email address</label>
  <!-- 其他用户资料字段 -->
</form>

注意要把诱饵字段放在真实字段前面，并且用position: absolute; left: -9999px;（别用display: none;，有些浏览器会忽略隐藏的诱饵），这样Firefox会优先匹配这些name相同的字段，把自动补全内容填进去，真实字段就干净了。

方案3：动态修改字段的name属性 #

Firefox的自动补全是基于字段的name属性和历史表单记录匹配的，我们可以在页面加载完成后，用JavaScript动态修改管理表单字段的name，让它和登录表单的name不重合：

document.addEventListener('DOMContentLoaded', function() {
  // 修改邮箱字段的name
  const emailField = document.getElementById('id_email');
  emailField.dataset.originalName = emailField.name;
  emailField.name = 'admin_user_email';

  // 修改密码字段的name
  const passwordField = document.getElementById('id_raw_password');
  passwordField.dataset.originalName = passwordField.name;
  passwordField.name = 'admin_user_password';
});

如果后端需要接收原来的字段名，可以在表单提交前再改回去：

document.querySelector('form').addEventListener('submit', function(e) {
  const emailField = document.getElementById('id_email');
  emailField.name = emailField.dataset.originalName;

  const passwordField = document.getElementById('id_raw_password');
  passwordField.name = passwordField.dataset.originalName;
});

这样浏览器就不会把这个表单和登录表单关联起来，自然不会触发自动补全。

总结 #

优先试试方案1，操作最简单；如果还是不行，方案2的诱饵字段几乎能解决所有Firefox自动补全的顽固问题；方案3适合对前端交互有更多控制的场景。

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