autocomplete="one-time-code"需配合短信格式、页面结构和用户设置才能触发自动填充，属性值须严格为全小写带连字符的one-time-code，input需用type="text"、inputmode="numeric"、pattern="\d{6}"、id与name一致，并置于含submit按钮的合法form内，短信须符合ios/android平台规则且页面为https，用户设备还需开启对应权限。
autocomplete="one-time-code" 本身不会“一键填充”，它只是告诉浏览器“这个框是填验证码的”，真正触发自动填充，需要短信格式、页面结构、用户操作三者配合。关键不是加了属性就完事，而是让系统能识别、能匹配、能安全填入。
输入框必须严格按规范写
属性值必须一字不差：one-time-code（全小写、带连字符、不能拼错、不能动态生成）。常见错误包括写成 otp、one_time_code、One-Time-Code 或漏引号。建议直接手写，避免框架绑定时出错。
- 用
<input type="text">，别用type="number"（Chrome/Safari 会忽略） - 加上
inputmode="numeric"，让软键盘默认弹数字键盘 - 推荐加
pattern="[0-9]{6}"（如为6位码），辅助校验和输入体验 - 确保有
id和name，例如id="otp"、name="otp"
表单结构要完整且合法
浏览器只在合理上下文中启用自动填充逻辑。单独一个 input 很难生效。
- 必须包裹在
<form></form>标签内 - 表单里至少有一个
<button type="submit"></button>（哪怕display: none） - 建议配
<label for="otp">验证码</label>，提升可访问性和语义识别 - 不要用
div模拟表单，也不要 JS 动态插入或替换该 input 节点
短信内容必须满足平台硬性规则
填不填，不取决于 HTML，而取决于手机是否把这条短信识别为可提取的 OTP。iOS 和 Android 规则不同，但都极严格：
- iOS：短信开头必须是【品牌名】或【App名称】（中文方括号），验证码为纯数字（推荐6位），前后要有空格或不可见分隔符，例如：【MyApp】您的验证码是 123456，请及时输入。
- Android（Chrome）：更依赖 WebOTP，要求短信含
@域名和#验证码，例如：Your code is 123456 @example.com #123456 - 两者都要求页面为 HTTPS，否则完全禁用
用户侧设置不能忽略
即使前端全对，用户设备没开对应功能，也白搭：
- iOS：设置 → 面容 ID 与密码 → 密码 → 自动填充密码 → 开启（需同时开启“自动填充验证码”）
- Android：信息 App 设置中打开「自动读取验证码」（部分厂商路径略有差异）
- 所有平台：用户首次使用需手动允许一次（如点击键盘上方浮层或地址栏提示）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
