HTML5如何设置自动完成_HTML5设置自动完成开关【指南】

autocomplete属性拼写错误（如autocomplet、auto-complete）会导致浏览器忽略自动填充；必须使用小写无连字符的autocomplete，且仅对input、textarea、select、form有效。

autocomplet属性值写错导致浏览器忽略自动完成

html5 表单控件的自动填充行为由 autocomplete 属性控制，但常见错误是拼写成 autocomplet（少一个 e）或 auto-complete（加了连字符），这两种写法浏览器完全不识别，等同于没写。必须严格使用小写、无连字符、完整拼写的 autocomplete。

另外，该属性只对 、、 和

有效，写在其他标签上无效。

设置 autocomplete=”off” 不一定真正关闭自动填充

现代浏览器（chrome 80+、edge 90+、firefox 90+）会忽略 autocomplete="off"，尤其对密码、邮箱、姓名等敏感字段。这是出于用户安全与体验考虑，不是 bug，而是规范演进后的主动限制。

若真需禁用（例如 OTP 输入框、临时验证码），可尝试以下组合：

• 使用非标准但被广泛支持的值：autocomplete="new-password"（适用于密码类输入，强制清空历史建议）
• 动态生成 name 和 id（如 name="otp_12345"），避免匹配已知字段语义
• 配合 readonly + onfocus="this.removeAttribute('readonly')" 干扰初始聚焦时的自动填充触发时机

启用自动完成需语义化 value 值而非仅靠 type

type="email" 或 type="tel" 本身不触发自动填充；起作用的是 autocomplete 的具体值。浏览器根据这些值匹配用户保存的资料。

常用合法值示例：

注意：autocomplete 值区分大小写，且必须来自 WHATWG 官方列表，自定义如 autocomplete="myemail" 会被忽略。

表单级 autocomplete 影响所有子输入框

在

标签上设置 autocomplete="off" 或 autocomplete="on"，会作为默认值向下继承给所有内部 ，除非子元素显式覆盖。

这意味着：

• 若整个登录表单想禁用自动填充，优先在
  

  设置，比逐个加更可靠

• 但若其中某个 显式声明，则它仍会触发邮箱建议，覆盖表单级 off
• Chrome 对
  

  的处理也趋于宽松——只要子元素有明确语义值（如 autocomplete="shipping postal-code"），仍可能激活填充

真正难搞的不是开关本身，而是浏览器越来越把“用户是否希望被填充”放在比开发者声明更高的优先级。别依赖 off 保安全，敏感操作该用一次性 Token 就用 token。