WebOTP API要求短信格式严格匹配正则规则：必须以【应用名】或【品牌名】开头，含6位纯数字验证码，前后需有不可见分隔符；navigator.credentials.get()须在用户手势后调用；输入框必须设autocomplete="one-time-code"属性。
WebOTP API 要求短信格式必须严格匹配正则规则
浏览器只会在收到符合特定格式的短信时触发 WebOTP 提示，否则完全静默——不是 API 失效，而是根本没被识别。关键点在于短信正文必须同时满足：
• 以 【应用名】 或 【品牌名】 开头（中文方括号，不能是英文或全角空格）
• 包含 6 位纯数字验证码（不能带“码”“：”“-”等任何字符，也不能是 4 位或带字母）
• 验证码前后需有至少一个不可见分隔符（推荐用 U+200E 左向控制符或空格），例如：【MyApp】您的验证码是 123456，请在 5 分钟内输入。
navigator.credentials.get({ otp: { transport: ['sms'] } }) 必须在用户手势后调用
这个 API 是受保护的，不能在页面加载完就自动执行，否则会直接报 NotAllowedError。必须绑定在用户明确交互之后，比如点击按钮、聚焦输入框或提交表单：
• ✅ 正确：给「获取验证码」按钮加 onclick，里面调用 get()
• ❌ 错误：放在 DOMContentLoaded 或 setTimeout 里自动触发
• 注意：transport: ['sms'] 是必需项，漏掉会导致返回 null，且目前仅 Chrome 和 Edge 支持，Safari 和 Firefox 不支持
输入框必须带 autocomplete="one-time-code" 属性
这是 WebOTP 能把验证码填进哪个字段的唯一依据，不加这个属性，即使 API 成功返回验证码，浏览器也不知道往哪填：
• 必须是 <input type="text"> 或 <input type="tel">，type="number" 会被忽略
• 属性值必须严格为 one-time-code（不能写成 otp、one_time_code 或大小写混用）
• 如果页面有多个带该属性的输入框，浏览器默认填第一个，不会弹窗让用户选
• 示例：<input type="text" autocomplete="one-time-code" id="otp">
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
常见失败原因和调试建议
遇到「没提示」「提示了但没填充」「填充错字段」，优先检查：
• 短信是否真被系统识别：Android 可在「信息」App 设置中打开「自动读取验证码」；iOS 无对应开关，依赖 iMessage 自动解析（仅限部分运营商）
• 控制台是否报 SecurityError：说明调用时机不对，确认是否在用户手势回调里
• 是否用了 HTTPS：WebOTP 在非安全上下文（http://）下完全禁用
• 输入框是否被动态移除/重建过：DOM 替换后原 autocomplete 属性丢失，需重新插入或保留节点
• Chrome 版本是否 ≥ 84：旧版本可能无提示或填充失败
立即学习“前端免费学习笔记（深入）”；
