浏览器自动填充依赖autocomplete值严格匹配whatwg规范，错写大小写、连字符或语义偏差即失效；需字段初始存在于dom、包裹在内、type/name/label协同完整。
浏览器自动填充不是“开了就灵”，而是个靠语义猜、靠结构判、靠时机填的黑盒机制——填错、不填、乱填，90% 是因为你没对上它的识别逻辑。
autocomplete 属性值写错，等于没写
浏览器只认标准值，写错一个字母或用错上下文，它就直接跳过该字段。比如登录页密码框写 autocomplete="new-password"，Chrome 会拒绝填充；注册页却必须用这个值，否则密码管理器不保存。
-
username用于账号名（非邮箱/手机号），email专指邮箱登录场景 - 地址字段必须具体：
street-address有效，address无效 -
tel比phone兼容性好；postal-code在国内基本不触发 - 密码字段必须成对：登录页用
current-password，改密页用new-password
动态设置 required 或 autocomplete 后校验失效
JavaScript 给 input 加 required，不代表它立刻参与提交校验——浏览器只在校验触发时检查属性是否存在，不关心它是否“视觉上合理”。
- 设
el.required = true可以，但取消时必须用el.removeAttribute('required')，赋false不生效 - 用户切换选项后隐藏了某字段，但
required还挂着 → 提交被拦且无提示 - 安全做法是每次提交前调用
el.checkValidity()主动检测，别等浏览器弹窗 -
autocomplete动态设置后，需确保元素处于可交互状态（未disabled、未display: none）
密码框被自动填充的三种干扰策略
现代浏览器基本无视 autocomplete="off"，尤其对 type="password" 字段。真正有效的做法是“骗过识别”，而非“命令禁止”。
- 插入隐藏干扰字段：
<input type="password" style="display:none;">，让浏览器优先填它 - 真实密码框初始设为
type="text"，在focus事件中再切为password - 动态创建密码输入框：DOM 加载完成后再用 JS 插入，避开浏览器初始解析阶段
- 避免用
name="password"命名干扰字段，防止后端误收；可命名为fake_pwd并服务端忽略
自动填充后样式丑得没法看
Chrome/Safari 填完会加一层 -webkit-autofill 样式，背景色、字体色、阴影全被接管，原 CSS 失效。
- 用
box-shadow: 0 0 0px 1000px #fff inset覆盖默认填充底色 - 若要透明填充色，必须加延迟过渡：
-webkit-transition-delay: 99999s，否则不生效 - 务必同时写全伪类：
input:-webkit-autofill、:hover、:focus、:active - 注意：这个 hack 仅限 WebKit 内核，Firefox 不支持
最常被忽略的是：自动填充行为发生在 HTML 解析阶段，而 DOM 就绪、JS 执行、用户交互都晚于它。所有“先加载再干预”的方案，都要卡准这个时间差——早了字段还没挂载，晚了填充已完成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
