autocomplete属性值必须严格匹配whatwg规范标准关键词（如email、tel、given-name），大小写敏感，拼写错误、自定义值或类型不协同均导致浏览器拒绝补全。
autocomplete 属性值选不对，浏览器根本不补全
浏览器只认标准的 autocomplete 值，比如填 "name" 或 "email" 才能触发对应字段的自动填充；写成 "user_name" 或 "mail" 就直接失效。Chrome、Safari 和 Edge 都严格遵循 WHATWG 规范，不接受自定义别名。
- 必须用规范值：
"given-name"、"family-name"、"organization"、"street-address"、"tel"、"bday"等，完整列表见 WHATWG Autofill spec -
"off"不等于禁用：它只是提示“本次不建议自动填充”，但某些浏览器（如 Chrome 80+）仍可能忽略并继续填充；真要禁用需配合autocomplete="new-password"（仅限密码字段）或移除name+ 动态生成id - 多字段地址场景下，
"address-line1"和"address-line2"必须连续出现，且不能跳过"address-level2"（城市）等中间层级，否则补全逻辑会中断
密码字段 autocomplete="current-password" 被当成新密码
登录页里如果把旧密码输入框设为 autocomplete="current-password"，但没配对设置用户名字段的 autocomplete="username"，部分浏览器（尤其是 Safari）会拒绝填充，甚至把该字段识别为注册页的新密码字段。
- 必须成对出现：
<input autocomplete="username">+<input autocomplete="current-password">，且顺序不能颠倒 - 注册页才用
autocomplete="new-password"；混用或错放会导致密码管理器拒绝保存或填充 - 不要给密码字段加
value属性（哪怕为空字符串），否则 Chrome 会跳过自动填充 - 若用 JS 动态清空密码框（例如切换登录/注册 tab），需在清空后调用
inputEl.focus()再blur()，触发浏览器重新检测字段状态
React/Vue 中动态渲染表单，autocomplete 失效
框架在首次渲染时没挂载 autocomplete 属性，或后续通过 state 更新了 autocomplete 值，浏览器不会重新绑定自动填充逻辑——这个属性只在元素插入 DOM 时读取一次。
- 确保 SSR 或初始渲染时就带正确值，不要靠
useEffect或mounted后再 setAttribute - 避免用条件渲染替换整个
<input>元素（比如{show && <input>}），这会导致 DOM 重建，丢失浏览器已建立的 autofill 关联 - Vue 中慎用
v-if控制 input 显示，改用v-show；React 中可用style={{ display: show ? 'block' : 'none' }}维持节点存在 - 如果必须换字段（如邮箱/手机号切换），给每个 input 设置唯一且稳定的
name和autocomplete，不要复用同一个 ref 或 id
移动端键盘类型不匹配 autocomplete 类型
Android 键盘和 iOS 键盘会根据 autocomplete 值调整键盘布局（比如 "email" 弹出 @ 键，"tel" 弹出数字键盘），但如果同时设置了 inputmode 或 type，优先级冲突会导致键盘类型错误或补全失败。
-
type="email"+autocomplete="email"是安全组合；但type="text"+autocomplete="email"在 iOS 上可能不触发邮箱键盘 -
inputmode="numeric"会覆盖autocomplete="tel"的键盘行为，导致缺失符号键（如 +、-、()），应只在明确需要纯数字输入时用 - iOS 对
autocomplete="postal-code"支持较弱，更推荐type="text"+inputmode="text"+pattern="[0-9A-Za-z\s\-]+"，兼顾补全与键盘体验
autocomplete="email" 看是否立刻生效，能快速定位是代码问题还是浏览器策略限制。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
