禁用表单自动补全技巧

关闭HTML表单的自动补全功能（包括浏览器历史记录和自动填充建议），可通过HTML5的 autocomplete 属性实现。以下是具体方法和注意事项：

---

一、全局禁用整个表单的自动补全

在 <form> 标签添加 autocomplete="off"，该表单内所有输入字段均禁用自动补全：

<form action="/submit" method="post" autocomplete="off">
  <input type="text" name="username">
  <input type="password" name="password">
</form>

---

二、针对特定字段禁用自动补全

在单个输入字段添加 autocomplete="off"，不影响其他字段：

<form action="/submit" method="post">
  <!-- 仅禁用该字段的自动补全 -->
  <input type="email" name="email" autocomplete="off">
  
  <!-- 其他字段不受影响 -->
  <input type="tel" name="phone">
</form>

---

三、特殊场景：强制禁用密码保存提示

现代浏览器（如Chrome）会忽略密码字段的 autocomplete="off"，需使用以下方案：

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

<input type="password" name="login-pwd" autocomplete="new-password">

此属性明确告知浏览器将此密码视为"新密码"，阻止自动填充历史密码。

方案2：动态修改只读属性（绕过浏览器限制）

<input type="password" name="secret" autocomplete="off" readonly
       onfocus="this.removeAttribute('readonly')">

• 初始设置 readonly 阻止自动填充
• 用户聚焦时通过 onfocus 解除只读，确保可输入

---

四、注意事项

1. 浏览器兼容性：

   • autocomplete="off" 被所有现代浏览器支持（Chrome、Firefox、Safari、Edge）
   • 但Chrome对密码字段有特殊处理（需用 new-password 或动态方案）¹²

2. 安全提示：

   • 敏感字段（如支付密码）建议禁用自动补全，降低数据泄露风险
   • 普通字段（如搜索框）无需禁用以保持用户体验

3. 额外属性增强效果（可选）：

   <!-- 禁用移动端自动修正/大写 -->
   <input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
   

---

总结建议

场景	推荐方案
整个表单禁用自动补全	<form autocomplete="off">
单个非密码字段禁用	<input autocomplete="off">
密码字段禁用自动填充	<input autocomplete="new-password">
兼容老旧浏览器	动态只读方案 + autocomplete="off"

注：遵循最小化禁用原则，避免过度干扰用户正常的表单填写体验。

---

1. Chrome设计逻辑：允许用户覆盖网站的 autocomplete="off" 设置，但尊重 new-password。 ↩︎

2. 动态只读方案确保密码字段既不会被自动填充，也不影响用户输入。 ↩︎