WebOTP功能依赖三个关键点：autocomplete="one-time-code"属性必须严格匹配规范；navigator.credentials.get()需在用户手势后调用并指定transport: ['sms']；短信内容须含@域名、#验证码且页面必须为HTTPS安全上下文。
autocomplete="one-time-code" 必须写对，大小写和连字符都不能错
浏览器只认 one-time-code 这个固定字符串，写成 otp、onetimecode、one_time_code 或大小写混用（如 One-Time-Code）都会失效。它不是自定义值，而是 WHATWG 规范强制定义的关键词。
常见错误场景：
- Vue/React 框架里用 v-bind:autocomplete 或 :autocomplete 动态绑定，结果变量拼错或带空格
- 后端模板渲染时被转义，比如变成
autocomplete="one-time-code"—— 实际不影响，但若漏了引号或引号类型混乱（单引号/双引号嵌套出错），会导致属性丢失 - 输入框是动态插入 DOM 的（比如弹窗表单），插入后没检查
autocomplete属性是否还在；DOM 替换或 innerHTML 赋值会清掉原有属性
navigator.credentials.get() 必须在用户手势后调用，不能放 onload 或定时器里
这个 API 受浏览器权限模型保护，必须由明确的用户交互触发，比如点击按钮、聚焦输入框、按回车等。直接在 DOMContentLoaded 里调用，或者用 setTimeout 延迟执行，都会抛出 NotAllowedError。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把调用逻辑绑在「获取验证码」按钮的
onclick或addEventListener('click', ...)里 - 如果用表单 submit 触发，记得加
event.preventDefault()，否则页面跳转会中断流程 - 务必传入
transport: ['sms']，漏掉这一项会导致返回null，且目前无 fallback 行为 - 建议配
signal（如AbortController），避免表单提交后还尝试填充已销毁的 input
短信内容格式不达标，浏览器根本不会识别
WebOTP 不是“监听短信”，而是靠正则匹配——整条短信必须同时满足三项硬性条件，缺一不可：
- 包含当前网页的完整域名，前面带
@符号，例如网页是https://app.example.com，短信里就得有@app.example.com（不能是@example.com或 IP） - 验证码必须是连续纯数字，4–8 位，前后有分隔（空格或 U+200E 控制符），且前面带
#，例如#123456 - 整条短信尽量简洁：避免多个
@、emoji、换行、中文标点干扰；Android 系统短信 App 有时会过滤含虚拟号段的短信，导致压根不进收件箱
测试时可用 Glitch 示例项目发送标准格式短信：Your code is 123456. @web-otp.glitch.me #123456。
HTTPS 是硬门槛，HTTP 或 localhost 外的非安全上下文一律禁用
WebOTP 在所有支持浏览器（Chrome 94+、Edge 94+）中强制要求安全上下文。HTTP 协议下该 API 根本不存在 —— 'OTPCredential' in window 会返回 false，连判断都绕不过去。
注意两个易忽略点：
- 本地开发用
localhost允许，但127.0.0.1或局域网 IP（如http://192.168.x.x）不行，除非走 HTTPS - Cordova / uni-app 打包成 App 后，WebView 加载的本地 HTML 文件（
file://协议）也不被认可，必须通过 HTTPS 服务托管资源 - 反向代理配置不当可能导致证书链不全或混合内容警告，也会让浏览器判定为非安全上下文
真正起作用的从来不是代码写得多漂亮，而是短信里那个 @ 和 # 是否对得上，以及用户手指有没有真点下去——这两处出错，其余全是白忙。
