autocomplete值必须严格符合WHATWG规范，拼写、大小写、下划线或自定义值均无效；type与autocomplete需匹配；label缺失或绑定错误会显著降低补全识别率；自动填充样式可通过-webkit-autofill调整，但autocomplete="off"已被现代浏览器忽略。
autocomplete 值写错等于没写，浏览器直接忽略
浏览器只认 WHATWG 规范里明确定义的 autocomplete 值，拼错、大小写错、加下划线或自定义（比如 user_email、Email、autocomplete-name）全无效。常见错误包括：
– autocomplete="firstname" → 应为 autocomplete="given-name"
– autocomplete="address" → 应为 autocomplete="street-address"
– autocomplete="tel" 写成 autocomplete="telephone" 或 autocomplete="mobile" 也不行
Safari 对非标准值尤其严格，哪怕只多一个空格或大小写不一致，补全建议、钥匙图标、已存数据全消失。
type 和 autocomplete 必须匹配，否则补全失效
浏览器会综合 type 和 autocomplete 判断字段语义。两者冲突时，多数浏览器优先信任 type。
– type="email" + autocomplete="email" ✅ 最稳
– type="text" + autocomplete="tel" ⚠️ Chrome 支持，但 iOS Safari 可能跳过
– type="number" + autocomplete="tel" ❌ 不推荐，数字键盘与电话字符串逻辑冲突
– type="password" 字段若漏掉 autocomplete="current-password" 或 autocomplete="new-password"，Chrome/Safari 可能强行填入错误密码，比如把新密码塞进登录框。
label 缺失或绑定错误，大幅降低补全识别率
浏览器依赖可访问性线索推断字段用途。没有 <label>，或 label[for] 指向错误的 id，会导致补全概率明显下降——尤其在 Safari 和旧版 Edge 中。
– 动态生成的 <input> 忘记同步设置唯一 id 和对应 label[for]
– 复制粘贴代码导致多个 label 绑定到同一个 id
– label 文本写成“请输入”而非“手机号”，语义弱，识别率低
必须确保每个 <input> 有唯一 id，且 <label for="xxx"> 精确指向它。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
自动填充样式难看，但禁用 autocomplete="off" 无效
自动填充后输入框常带黄色背景或奇怪阴影，这是 input:-webkit-autofill 的默认样式。想改颜色可用：input:-webkit-autofill { box-shadow: 0 0 0px 1000px #f8f8f8 inset !important; }
想透明填充色，需配合延迟过渡：input:-webkit-autofill { -webkit-transition-delay: 99999s; }input:-webkit-autofill { box-shadow: 0 0 0px 1000px transparent inset !important; }
注意：autocomplete="off" 在现代浏览器（尤其 type="password" 场景）基本无效，Chrome ≥76、Edge、Safari 都主动忽略——这不是 bug，是安全策略。
立即学习“前端免费学习笔记（深入）”；
