autocomplete 属性值须精准匹配字段语义：用户名用 username，邮箱登录用 email，密码分 current-password（登录）和 new-password（注册/改密），地址用 street-address，tel 优于 phone；同时需确保表单结构规范、字段可见可交互、框架绑定正确，并兼顾 Safari 等浏览器的特殊要求。
autocomplete 属性值怎么选才不被浏览器乱填
浏览器自动填充不是“开个开关”就完事，autocomplete 值写错，轻则填错字段（比如把邮箱塞进电话框），重则整个表单被绕过——尤其在 Chrome 80+ 和 Safari 15.4+ 里，填错 autocomplete 值会让浏览器直接放弃该字段的自动填充。
关键不是“要不要填”，而是“告诉浏览器你这个字段到底是什么”。常见错误是全写成 autocomplete="on" 或随便写个 autocomplete="email" 却放在用户名输入框里。
-
autocomplete="username"用于登录账号（不是邮箱，也不是手机号）；如果实际是邮箱登录，应写autocomplete="email" - 密码字段必须成对出现：
autocomplete="current-password"（登录页）和autocomplete="new-password"（注册/改密页），混用会导致密码管理器拒绝填充 - 地址类字段要具体：用
autocomplete="street-address"，别只写autocomplete="address"（后者无效） - 中文场景下，
autocomplete="tel"比autocomplete="phone"可靠；autocomplete="postal-code"在国内基本不触发（邮政编码极少被浏览器保存）
为什么加了 autocomplete 还是不填？检查这三处
自动填充失败，90% 不是浏览器问题，而是 DOM 结构或交互逻辑挡住了它。
- 表单没包裹在
标签里，或者用了display: none/visibility: hidden隐藏字段——浏览器会跳过不可见、不可交互的 - 字段在页面加载后动态插入（比如 Vue 的 v-if、React 的条件渲染），但没等框架挂载完成就触发了自动填充时机；解决方案：延迟 100ms 再插入 input，或用
setTimeout(() => { input.focus(); }, 100)主动唤起 - 用户之前手动清空过该字段的自动填充记录（比如在 Chrome 设置里删过 saved passwords），此时即使属性全对，也不会触发——需用户主动右键点击输入框选择“自动填充”
React/Vue 项目里 autocomplete 失效的典型写法
框架的响应式绑定容易覆盖原生行为。比如 React 中写 value={state} 但没配 onChange，表单就成了只读；Vue 里用 v-model 却没初始化对应 data 字段，也会让浏览器认为字段“不可编辑”而跳过填充。
- React 中确保受控组件有完整闭环：
value+onChange缺一不可；若想保留自动填充又不想立刻同步 state，可用defaultValue替代value（仅限首次渲染） - Vue 中避免在
mounted钩子中立即this.$nextTick(() => this.field = '')清空初始值——这会覆盖浏览器刚填入的内容 - 所有框架都慎用
autoComplete="off"（注意大小写）：Chrome 会忽略它，但 Safari 16+ 会当真；如需禁用，请用更隐蔽的方式，比如autocomplete="new-password"配合随机 name 值
移动端 Safari 自动填充特别难搞？试试这个组合
iOS 16+ 对 autocomplete 更严格，且只信任 HTTPS 页面、且要求表单有明确提交动作（不能纯 JS 提交）。单纯加属性往往没用。
- 确保表单有
，而不是只靠@click触发提交 - 给关键字段加
name属性，且值要语义化：比如name="email"、name="password"；Safari 会比对name和autocomplete是否一致 - 避免在 input 上写
inputmode="text"覆盖默认行为；需要数字键盘时，用inputmode="decimal"或type="tel"更稳妥 - 测试时别只看模拟器——真机上长按输入框才能唤出“自动填充”菜单，而且只在用户已保存过该域名凭据时才显示
最麻烦的点其实是：自动填充成功与否，高度依赖用户本地的保存记录、浏览器版本、甚至当前是否启用了 iCloud 钥匙串同步。写死逻辑没用，得留好 fallback——比如检测到字段为空且页面加载完成 1 秒后，再判断是否需要提示用户手动触发填充。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
