iOS16移动端Chrome/Firefox实现OTP短信自动填充方案咨询

核心结论 #

在iOS 16的Chrome和Firefox移动端浏览器中，无法直接监听短信接收事件——iOS系统限制了第三方浏览器访问短信内容或监听短信接收动作，所有需要获取短信验证码的操作必须遵循系统提供的规范接口。

已尝试方案失效原因分析 #

1. WebOTP API未触发 #

WebOTP API在iOS第三方浏览器上有严格的触发条件，没生效大概率是以下原因：

• 短信格式不符合规范：必须包含你的网站域名（如@yourdomain.com）和验证码，示例格式：Your verification code is 123456. @yourdomain.com #123456
• 页面未使用HTTPS（本地开发localhost除外）
• 未正确处理多输入框：WebOTP返回的是完整6位验证码，需要手动拆分到多个输入框，而非每个框单独配置API

2. autocomplete="one-time-code"仅手动触发 #

iOS系统的自动填充逻辑默认针对单个输入框，多输入框场景下系统无法识别需要填充到多个位置，因此只能在用户点击输入框后手动选择填充。

3. ClipboardEvent未触发 #

iOS系统禁止第三方浏览器自动访问剪贴板，只有用户主动触发的操作（如点击按钮、长按粘贴）才能调用剪贴板API，因此自动监听剪贴板事件不会生效。

可行替代方案 #

方案1：优化WebOTP API实现 #

调整短信格式和代码逻辑，触发系统的OTP填充提示：

1. 确保短信包含域名和验证码，格式示例：你的验证码是123456。@yourdomain.com #123456
2. 使用正确的API调用代码，获取完整验证码后拆分到多输入框：

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', () => {
    const abortController = new AbortController();
    navigator.credentials.get({
      otp: { transport: ['sms'] },
      signal: abortController.signal
    }).then(credential => {
      const otpCode = credential.code;
      // 拆分验证码到6个输入框
      const otpInputs = document.querySelectorAll('.otp-input');
      otpInputs.forEach((input, idx) => {
        input.value = otpCode[idx] || '';
      });
    }).catch(err => {
      console.error('WebOTP获取失败:', err);
    });

    // 页面卸载时终止请求
    window.addEventListener('beforeunload', () => abortController.abort());
  });
}

注意：iOS上需要用户点击系统弹出的OTP填充提示才能完成自动填充，这是系统层面的限制，无法完全无交互自动完成。

方案2：单个隐藏输入框+多框拆分 #

利用系统对单个输入框的自动填充支持，通过隐藏中转框实现多框填充：

1. 添加隐藏的自动填充输入框：

<input 
  type="text" 
  id="hidden-otp" 
  autocomplete="one-time-code" 
  style="position: absolute; left: -9999px;"
>
<!-- 6个可见的OTP输入框 -->
<div class="otp-group">
  <input type="text" maxlength="1" class="otp-input">
  <input type="text" maxlength="1" class="otp-input">
  <input type="text" maxlength="1" class="otp-input">
  <input type="text" maxlength="1" class="otp-input">
  <input type="text" maxlength="1" class="otp-input">
  <input type="text" maxlength="1" class="otp-input">
</div>

2. 监听隐藏框的输入事件，拆分验证码到可见框：

document.getElementById('hidden-otp').addEventListener('input', (e) => {
  const otpCode = e.target.value.trim();
  if (otpCode.length !== 6) return;
  
  const otpInputs = document.querySelectorAll('.otp-input');
  otpInputs.forEach((input, idx) => {
    input.value = otpCode[idx];
  });
});

这种方式用户只需点击系统弹出的填充提示，即可自动完成多框填充。

方案3：引导用户手动粘贴验证码 #

由于iOS限制自动剪贴板访问，可提供粘贴按钮简化操作：

1. 添加粘贴按钮：

<button id="paste-otp-btn">粘贴验证码</button>

2. 实现点击后的剪贴板读取与填充逻辑：

document.getElementById('paste-otp-btn').addEventListener('click', async () => {
  try {
    const clipboardText = await navigator.clipboard.readText();
    // 验证是否为6位数字验证码
    if (/^\d{6}$/.test(clipboardText)) {
      const otpInputs = document.querySelectorAll('.otp-input');
      otpInputs.forEach((input, idx) => {
        input.value = clipboardText[idx];
      });
    } else {
      alert('剪贴板内容不是有效的6位验证码');
    }
  } catch (err) {
    alert('无法访问剪贴板，请手动粘贴');
  }
});

内容的提问来源于stack exchange，提问作者devnull Ψ