autocomplete属性值必须为whatwg规范定义的标准关键词（如email、tel、given-name、street-address）才有效，写错或自定义（如user_name、mobile）会被浏览器直接忽略。
autocomplete 属性值写不对，浏览器直接忽略
浏览器只认标准的 autocomplete 值，比如 name、email、tel、street-address，写成 user_name 或 mobile 就不会触发自动填充。Chrome 和 Safari 对非标准值基本不响应，Firefox 稍宽松但也不保证生效。
常见错误场景：后端模板拼接字段名时加了前缀（如 profile_email），或前端用驼峰命名（userEmail），结果表单完全没提示。
- 必须用 W3C 定义的值：
given-name、family-name、organization、postal-code等 - 地址类字段要拆开写：
address-line1、address-line2、country，不能全塞进一个address - 密码字段必须配对出现：
current-password+new-password，否则密码管理器可能不识别
input type 和 autocomplete 不匹配，导致填错字段
比如把邮箱输入框设成 <input type="text" autocomplete="email">，看似合理，但部分浏览器（尤其是 Safari）更信任 type="email" 的语义。如果 type 是 text，即使 autocomplete="email" 也可能被降级处理。
实测发现：Chrome 在 type="email" + autocomplete="email" 时唤出邮箱建议最稳定；Safari 对 type="tel" + autocomplete="tel" 的手机号填充准确率明显高于仅靠 autocomplete。
-
email字段：用type="email"+autocomplete="email" -
tel字段：用type="tel"+autocomplete="tel"（注意不是telephone） - 搜索框/非敏感字段：可设
autocomplete="off"，但不要滥用——它只在用户主动关闭时才该用
动态生成表单或 Vue/React 组件里 autocomplete 失效
浏览器在页面加载时扫描 <input> 并建立字段映射，如果 input 是 JS 动态插入（比如 document.createElement('input') 或框架渲染后挂载），部分浏览器（特别是旧版 Safari）可能错过初始化时机，导致 autocomplete 不工作。
Vue 中 v-model 或 React 中 value 受控组件本身不影响 autocomplete，但若初始渲染时 autocomplete 属性是空字符串、null 或通过计算属性异步设置，就容易断掉链路。
- 确保
autocomplete是静态 HTML 属性，或在 DOM 插入前已正确赋值（避免用setAttribute延迟设置） - React 中避免
autocomplete={someVar || 'off'}这类条件表达式，首次渲染必须是明确值（如'email'） - Vue 模板中直接写死：
<input autocomplete="given-name">，别绑定到 data 或 computed
密码字段被 autofill 覆盖，但用户没感知
现代浏览器会在页面加载后自动填充密码字段，并触发 input 和 change 事件，但很多前端校验逻辑只监听用户手动输入（比如 onInput），结果表单校验通过，实际提交的是浏览器填的旧密码，用户自己都不知道。
更隐蔽的问题：某些密码管理器（如 1Password）会用 data-1p-injected="true" 注入样式，但不会触发原生事件，导致依赖 input 的实时校验失效。
- 监听
animationstart或webkitAnimationStart（Chrome 填充时会触发伪动画）作为兜底检测 - 密码字段首次获得焦点时，检查
input.value.length > 0 && !input.dataset.userInput，再补一次校验 - 服务端必须做二次验证：即使前端显示“密码已填”，仍需校验格式、长度、是否与确认字段一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
