autocomplete值必须严格匹配WHATWG规范,大小写敏感且不可拼错或加空格;密码字段须用current-password/new-password而非off;地址字段需分层拆解为address-level1等独立输入框。

autocomplete 值必须严格匹配 WHATWG 规范,大小写敏感
浏览器只认标准值,填错就等于没写。比如 autocomplete="email" 有效,但 autocomplete="user-email"、autocomplete="Email" 或 autocomplete=" email "(带空格)全被忽略。
常见有效值包括:name、email、tel、street-address、address-line1、address-line2、address-level1、address-level2、country、postal-code、cc-number、cc-exp、cc-csc、current-password、new-password。
非标准值如 autocomplete="phone"、autocomplete="zip"、autocomplete="member-id" 都不会触发自动填充,别白费劲。
密码字段必须用 current-password / new-password,不能用 off
autocomplete="off" 对密码字段基本失效——Chrome 80+、Edge 79+、Safari 15.4+ 都会无视它,仍可能在密码管理器弹窗中显示该字段。
正确做法是语义化区分用途:
- 登录页的密码框 →
autocomplete="current-password" - 注册页或改密页的新密码框 →
autocomplete="new-password" - 确认新密码框 → 同样用
autocomplete="new-password"(不是confirm-password,没这标准值)
混用会导致 Chrome 拒绝保存新密码;用 off 则既禁不了填充,又丢了拼写检查和输入建议,体验更差。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
地址类字段要拆解,不能塞进一个 autocomplete 值
浏览器对复合地址识别依赖结构化标注。把“省市区”全塞进 autocomplete="shipping address" 是无效的。
必须按层级拆开:
- 国家选择框 →
autocomplete="country" - 省/直辖市 →
autocomplete="address-level1" - 市/地区 →
autocomplete="address-level2" - 区/县 →
autocomplete="address-level3"(部分浏览器支持,非强制) - 街道地址第 1 行 →
autocomplete="address-line1" - 街道地址第 2 行(如“楼栋号、单元”)→
autocomplete="address-line2" - 邮编 →
autocomplete="postal-code"
iOS Safari 尤其严格:不接受空格分隔的组合值(如 section-billing shipping street-address),而 Chrome Android 有时会强行匹配,但效果不稳定。
为什么写了正确值却没自动填充?重点排查这些点
autocomplete 生效不是“写了就灵”,而是依赖完整上下文。以下情况哪怕值全对,也会静默失效:
- input 不在
标签内 —— 浏览器跳过无表单上下文的字段 - 字段初始
value被 JS 动态清空或重设(如input.value = "")—— 中断了浏览器的填充时机 - 页面加载后才用 JS 插入 input 元素,且未在插入前就写好
autocomplete属性 —— Safari 尤其容易漏识别 - 同页面有多个
autocomplete="email"字段(如主邮箱 + 备用邮箱)—— 浏览器无法判断优先级,可能全部跳过 - input 的
type和autocomplete值冲突,例如type="text"+autocomplete="email"可行但触发率低;type="email"+autocomplete="email"才最稳
最容易被忽略的是:移动端 Safari 对 autocomplete 的校验比 Chrome 严得多,测试不能只看 Chrome 渲染结果。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










