浏览器自动填充需严格匹配WHATWG标准autocomplete值并协同type属性:如email、tel、street-address等小写token,配合对应type才能精准触发键盘与候选;地址需加shipping等语义前缀;脱离form、JS篡改value或缺失HTTPS等均会禁用填充。

直接用对 autocomplete 值,再配好 type,浏览器才真能自动填、填得准、填得快。光写 autocomplete="on" 或随便起个名字(比如 autocomplete="userTel"),基本等于没设。
必须匹配标准值,大小写都不能错
浏览器只认 WHATWG 规范里定义的小写 token,拼错、大小写混、加下划线或连字符,全被忽略:
-
正确:
autocomplete="email"、autocomplete="tel"、autocomplete="street-address" -
无效:
autocomplete="Email"、autocomplete="user_email"、autocomplete="postal code"(空格也不行) - 姓名统一用
autocomplete="name";如需拆分,可用given-name和family-name - 密码要成对:登录用
current-password,注册/改密用new-password
type 和 autocomplete 必须协同生效
两者不是各自独立的开关,而是组合识别的关键:
实现 Markdown↔ HTML 互转,支持导出 PDF,用于用户请求的文档格式转换。
-
type="email"+autocomplete="email"→ 触发邮箱键盘 + 自动填充候选 -
type="tel"+autocomplete="tel"→ 弹出数字键盘 + 匹配已存号码 -
type="date"+autocomplete="bday"→ 才可能唤起生日历史建议 -
type="text"+autocomplete="email"虽能填,但不弹邮箱键盘;type="number"+autocomplete="tel"反而干扰识别
收货地址等场景要加语义前缀
避免浏览器把账单地址填进收货栏,必须显式标注用途:
立即学习“前端免费学习笔记(深入)”;
- 收货人电话:
autocomplete="shipping tel" - 收货街道:
autocomplete="shipping street-address" - 收货邮编:
autocomplete="shipping postal-code" - 收货国家:
autocomplete="shipping country" - 省市区可依次用
shipping address-level1、shipping address-level2,跳过某级就直接省略字段
别让这些操作悄悄关掉自动填充
即使属性全对,以下情况也会让浏览器跳过填充:
- input 不在
<form></form>标签内——浏览器基本不处理 - 页面加载后 JS 主动清空或赋值
input.value,尤其没触发input或change事件时 - 写了
autocomplete="off"——现代浏览器(Chrome ≥80、Edge、Firefox)大多会无视,尤其对 email/name/tel 等字段 - 验证码输入框只写
autocomplete="one-time-code"不够,还得在 form 内、有隐藏 submit 按钮、走 HTTPS、短信模板合规


















