HTML5的autocomplete属性不能自动弹出短信验证码，仅用于标识字段语义以支持浏览器凭证填充；正确用法是配合autocomplete="one-time-code"、inputmode="numeric"及规范短信格式，借助iOS/Android原生能力实现验证码自动填充。
HTML5 的 `autocomplete` 属性**不能引导浏览器自动弹出短信验证码**，也无法直接触发系统级的验证码输入（如 iOS 的“自动填充验证码”或 Android 的“SMS Retriever API”功能）。这是一个常见误解。 `autocomplete` 的作用是**协助浏览器识别表单字段语义**，从而在用户已有保存的凭证（如用户名、密码、邮箱、电话）时，提供自动填充建议。它本身不处理短信、不读取短信内容、不调用系统验证码解析能力。 但你可以**配合 `autocomplete` + 平台原生能力**，提升移动端验证码输入体验。以下是关键事实与正确做法：
✅ 正确理解 autocomplete 的作用
`autocomplete` 是一个提示性属性，告诉浏览器“这个输入框是用来填什么的”。例如：
-
autocomplete="one-time-code"—— 这是 HTML5.2 新增的合法值，专用于一次性验证码（如短信/邮件验证码） -
autocomplete="tel"或autocomplete="email"—— 帮助浏览器关联已存的手机号/邮箱，为后续自动填充打基础 - 浏览器是否响应、如何响应，取决于其自身实现（如 Safari 14+、Chrome 83+ 支持
one-time-code）
? iOS（Safari）如何真正实现“自动填充验证码”？
需要同时满足三个条件：
-
服务端发送带特定格式的短信：短信正文末尾需包含形如
ABC-123456的 6 位码，并以【App名称】开头（iOS 要求品牌标识） -
前端输入框正确标记：
- 用户已开启“密码与自动填充”设置（设置 → 面容 ID 与密码 → 密码 → 自动填充密码 → 开启）
满足后，iOS 会将短信中的验证码以浮层形式显示在键盘上方，点击即可粘贴。
? Android（Chrome / 系统键盘）支持情况
Android 原生依赖 SMS Retriever API（需 App 集成），网页无法直接调用。但 Chrome for Android（v105+）在部分场景下可基于短信内容 + `autocomplete="one-time-code"` 尝试解析并推荐填充：
- 短信需含 4–10 位纯数字验证码，且无干扰文字（如避免“您的验证码是：123456。”）
- 推荐搭配
inputmode="numeric"和pattern="[0-9]*"提升软键盘体验 - 目前兼容性弱于 iOS，不建议作为唯一方案
? 实用建议：让验证码输入更顺滑
- 使用标准写法：
- 禁用输入法预测：
spellcheck="false" autocapitalize="off" autocorrect="off" - 短信模板务必简洁规范（iOS 最可靠），例如：
您的验证码是 874219。如非本人操作，请忽略。【我的应用】 - 降级方案：提供“粘贴”按钮，监听剪贴板变化（
navigator.clipboard.readText()），并校验是否为 6 位数字
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
