要使iOS Safari或WebView显示“自动填充验证码”按钮，必须设置autocomplete="one-time-code"，推荐搭配inputmode="numeric"和pattern="[0-9]*"，短信需含4–6位纯数字验证码及“验证码”或“code”字样。
在 iOS Safari 或 WebView 中，要让系统键盘上方显示“自动填充验证码”按钮（即一键填充 OTP），关键在于为输入框设置正确的 inputmode 和 autocomplete 属性，并配合服务端发送带标准格式的短信。
1. 必须设置 autocomplete="one-time-code"
这是 iOS 12+ 识别验证码填充的核心属性。仅靠 inputmode 或 placeholder 不起作用。
- 必须写成
autocomplete="one-time-code"（全小写、连字符、无空格） - 不能用
autocomplete="otp"、"off"或其他变体，iOS 不识别 - 该属性需直接写在
<input>标签上，动态 JS 设置可能不生效
2. 推荐搭配 inputmode="numeric" 和 pattern="[0-9]*"
辅助系统判断输入意图，提升兼容性与体验：
-
inputmode="numeric"：明确告知 iOS 弹出数字键盘（含「.」和「0–9」） -
pattern="[0-9]*"：增强语义，部分 iOS 版本依赖此触发 OTP 填充 UI - 避免使用
type="number"—— 它会引入上下箭头、科学计数法等干扰行为，且在部分 iOS 版本中抑制 OTP 提示
3. 短信内容需符合 Apple 的格式规范
即使前端属性正确，若短信不满足条件，iOS 也不会显示填充按钮：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 验证码必须是纯数字（如
123456），且长度为 4–6 位（推荐 6 位） - 短信中需包含「验证码」或「code」字样（中英文均可，如「您的验证码是 123456」）
- 建议在验证码前后加空格或标点（如「：123456。」），便于系统提取
- 短信需由真实手机号发送（非模拟号），且未被标记为垃圾短信
4. 其他注意事项
确保整体流程不破坏 OTP 自动填充链路：
- 输入框需有明确的
name属性（如name="otp"），虽非强制但建议保留 - 不要用
contenteditable或自定义组件替代原生<input>—— 自动填充只支持原生表单控件 - 页面加载后输入框应处于可聚焦状态（避免延迟渲染或隐藏后才显示）
- 避免在用户输入前主动
.focus()，iOS 可能因此跳过 OTP 检测；建议用户点击后聚焦
一个典型可用的 HTML 示例：
type="text"inputmode="numeric"
autocomplete="one-time-code"
pattern="[0-9]*"
maxlength="6"
name="otp"
placeholder="请输入验证码"
>
只要短信格式合规，且页面在 iOS Safari 中打开，用户收到验证码后，键盘上方就会出现「自动填充验证码」按钮，点击即可一键填入。
