autocomplete 属性是语义化提示而非开关，需使用 w3c 定义的有效值（如 email、current-password）才能触发浏览器自动填充，错误写法（如 on/off/true/空值）会导致启发式猜测、效果不稳定。
autocomplete 属性不是开关，是提示词
浏览器自动完成（Autofill）不靠 autocomplete="on" 或 autocomplete="off" 控制——这两个值已被现代浏览器忽略或弱化处理。真正起作用的是语义化的 autocomplete 值，比如 autocomplete="email"、autocomplete="shipping street-address"。浏览器根据这些值匹配用户保存的地址、支付信息等，决定是否填充及填什么。
常见错误是写成 autocomplete="true" 或留空，这会让浏览器退回到启发式猜测，效果极不稳定。
-
autocomplete必须设为 W3C 定义的[有效令牌](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill)（如name、current-password、organization-title），不能自定义字符串 - 密码字段必须配对使用：
<input type="password" autocomplete="current-password">和<input type="password" autocomplete="new-password">，否则 Chrome 可能拒绝保存新密码 - 同一表单中多个
autocomplete值需逻辑一致；例如billing *开头的字段不应混入shipping *，否则地址自动填充可能错位
type 和 autocomplete 要协同，不能只靠一个
type="email" 或 type="tel" 本身不触发自动完成，但它们和对应 autocomplete 值组合时，能强化字段意图。比如：
<input type="email" autocomplete="email"><input type="tel" autocomplete="tel"><input type="text" autocomplete="organization">
如果写成 <input type="text" autocomplete="email">，部分浏览器仍会尝试填充邮箱，但 iOS Safari 可能完全跳过；反过来，type="email" 却没设 autocomplete，则仅触发软键盘优化，不参与 Autofill 数据库匹配。
-
type="search"、type="url"等特殊类型，若未配对应autocomplete，基本不参与自动完成流程 - 自定义输入框（如用
contenteditable或 div 模拟）完全无法被 Autofill 识别，必须用原生<input>或<textarea></textarea> - 动态渲染的表单（如 React 中 useEffect 插入 input）需确保 DOM 渲染完成后再聚焦，否则 Chrome 可能因“无用户交互”跳过自动填充
浏览器行为差异大，别信“测试一次就稳了”
Chrome 最激进：会主动弹出下拉建议、保存新密码、跨设备同步地址；Safari 对 autocomplete 值更严格，比如不认 street-address（必须写全 shipping street-address 或 billing street-address）；Firefox 目前仅支持基础字段（name、email、tel），对地址层级支持有限。
- 隐身模式下，Chrome 仍可显示已保存的 Autofill 数据，但不会保存新条目；Safari 隐私模式则直接禁用全部自动填充
- 表单提交后，Chrome 可能弹出“保存密码？”气泡，但前提是：表单含
type="password"+autocomplete="current-password"，且有另一个非空文本字段（如autocomplete="username"或autocomplete="email"） - 移动端 Safari 在
inputmode="numeric"与autocomplete="tel"同时存在时，才稳定唤起数字键盘+自动填充电话
绕过 autocomplete="off" 的现实策略
很多老系统用 autocomplete="off" 想禁用自动填充，但现代浏览器（尤其 Chrome 88+）会直接忽略它——特别是当字段明显是邮箱、密码或姓名时。与其对抗，不如顺势引导：
- 若真需禁用（如 OTP 输入框），改用
autocomplete="one-time-code"，这是唯一被 Chrome/Firefox/Safari 共同认可的“禁用型”值 - 避免用随机 name/id（如
name="user_email_123"）试图混淆，浏览器现在基于autocomplete值而非 name 属性做匹配 - 密码确认字段务必设
autocomplete="new-password"，哪怕它和新密码字段 value 相同；设成off或留空，会导致密码管理器不识别整个密码流程
自动完成不是 CSS 那样写对属性就生效的机制，它依赖语义一致性、用户历史数据、浏览器版本和平台特性。最稳妥的做法，是把每个 input 当作一次与浏览器 Autofill 引擎的对话：说清楚“我是谁”，而不是“请帮我填”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
