如何创建支持iOS 15+ TOTP验证码自动填充的HTML输入框？

以下是针对autocomplete='one-time-code'无效问题的具体排查和解决步骤：

1. 确保Cordova WKWebView配置正确 #

iOS 15+的自动填充依赖WKWebView，先确认项目已启用并配置到位：

• 安装/更新WKWebView插件：

  cordova plugin add cordova-plugin-wkwebview-engine --save
  cordova plugin update cordova-plugin-wkwebview-engine
  

• 在config.xml中添加强制使用WKWebView的配置：

  <preference name="WKWebViewOnly" value="yes" />
  <preference name="AllowFileAccess" value="yes" />
  

2. 修正Angular输入框的属性设置 #

Angular表单控件可能干扰原生自动填充逻辑，按以下标准配置输入框：

<input type="text"
       name="verificationCode"
       formControlName="verificationCode"
       autocomplete="one-time-code"
       inputmode="numeric"
       pattern="[0-9]{6}"
       placeholder="请输入6位验证码"
>

• 必须设置name属性，帮助iOS识别字段用途
• inputmode="numeric"和pattern="[0-9]{6}"明确告知系统这是数字验证码输入框
• 禁止给输入框设置readonly或disabled，这会直接阻断自动填充

3. 配置iOS关联域名（关键） #

iOS 15+要求APP与域名绑定，才能匹配短信中的验证码：

1. 登录Apple Developer后台，找到对应APP ID，开启Associated Domains功能
2. 在config.xml中添加关联域名配置：

   <platform name="ios">
     <config-file parent="com.apple.developer.associated-domains" target="*-Info.plist">
       <array>
         <string>webcredentials:your-app-domain.com</string>
       </array>
     </config-file>
   </platform>
   

3. 短信内容必须包含@your-app-domain.com后缀，示例：

   你的验证码是：123456 @your-app-domain.com

4. 检查iOS系统设置 #

确保用户设备的自动填充功能已开启：

• 打开iOS设置 → 密码 → 自动填充密码
• 开启“自动填充密码”选项，并确认你的APP在允许列表中

5. 测试注意事项 #

• 必须使用真实iOS设备测试，模拟器的自动填充功能存在兼容性问题
• 测试短信需发送到设备绑定的手机号，不能使用模拟器的虚拟短信

内容的提问来源于stack exchange，提问作者Manarjan Singh Ghai