表单自动填充应按语义开启，密码类等特殊字段必须关闭；autocomplete="off"常失效，应改用语义化值如new-password、tel、cc-number等，并确保前后端语义一致。
表单自动填充建议是否开启，取决于字段语义是否明确、用户是否真需要它——多数场景下应开，但密码类、动态生成类、多步骤表单中间字段必须关。
autocomplete="off" 为什么经常失效
浏览器（尤其 Chrome）已基本忽略全局 autocomplete="off"，尤其对 <input type="password"> 或含 “password” “email” 等关键词的 name/id。它只在语义模糊时可能生效，比如 name="user_input_1"，但这是反模式。
- 真正有效的做法是用语义化值：如
autocomplete="new-password"（防密码覆盖）、autocomplete="one-time-code"（短信验证码） - 若想彻底禁用某输入框的自动填充，可改用
autocomplete="section-myform-off"（自定义 section 名），让浏览器认为它不属于任何已知表单上下文 - 不要依赖 JS 动态设
autocomplete="off"后再 focus —— Chrome 会回退到初始 HTML 属性值
哪些 autocomplete 值该优先用
用对值比“开/关”更重要。浏览器靠它匹配本地保存的地址、银行卡、登录凭据等数据，填错值反而导致建议错乱或不出现。
- 邮箱：
autocomplete="email"（不是"user-email"） - 手机号：
autocomplete="tel"（"phone"无效） - 收货地址行：
autocomplete="address-line1"，而非"address1" - 银行卡号：
autocomplete="cc-number"，配合inputmode="numeric"和pattern="[0-9\s]{13,19}"更稳妥 - 姓名（用于支付）：
autocomplete="cc-name"；用于注册则用autocomplete="name"
密码字段的 autocomplete 必须分场景处理
一个页面多个密码框（如“旧密码”“新密码”“确认新密码”）极易被浏览器混淆填充，引发用户困惑甚至阻断提交。
- 登录页密码框：用
autocomplete="current-password" - 注册/修改密码页的“新密码”框：必须用
autocomplete="new-password"（这是唯一被主流浏览器尊重的禁填标识） - “确认密码”框：不要设
autocomplete，或设为autocomplete="off"（此时因无语义，Chrome 通常放行） - 绝对不要给密码框设
value=""或预填充空格 —— 某些浏览器会因此触发“检测到密码字段被篡改”，直接屏蔽所有密码建议
React/Vue 中动态表单容易踩的坑
框架中通过 v-if 或 key 切换表单字段时，若新旧 input 的 name 或 id 相同但 autocomplete 值不同，浏览器可能沿用旧缓存逻辑，导致建议弹出位置错位或内容错误。
- 确保每次渲染新字段时，
autocomplete值与当前语义严格一致（例如从“登录”切到“重置密码”，密码框必须从current-password切到new-password） - 避免复用同一 DOM 节点：给关键 input 加唯一
key，比如:key="'pwd-' + step" - 不要在 mounted/useEffect 里用 JS 改
autocomplete属性 —— 此时浏览器已完成自动填充决策，修改无效
最常被忽略的一点：autocomplete 不是开关，是契约。你写了 autocomplete="shipping postal-code"，就得保证这个输入框确实用于填写收货邮编，且前后端都按此语义处理。填错值比不填更伤体验。
