iOS Safari网页加载时自动唤起数字键盘的实现方案咨询

核心原因 #

iOS Safari 出于用户体验保护，仅允许由用户主动交互（触摸、点击等）触发的 focus() 调用唤起键盘，页面加载完成后通过脚本自动调用的 focus() 只会让输入框获焦，但不会弹出键盘——这是苹果的明确限制，无法完全"绕过"，只能通过符合规则的方式优化体验。

可行解决方案 #

1. 基于用户首次交互触发焦点（最稳妥） #

监听页面的首次触摸或点击事件，在用户主动和页面交互时调用 focus()，此时属于合法触发，iOS Safari 会正常弹出键盘。

替换你现有代码中的 window.onload 逻辑：

// 替换原有的window.onload函数
let hasInitiatedFocus = false;

function triggerInputFocus() {
  if (!hasInitiatedFocus) {
    const firstInput = document.querySelector("#inputContainer input:nth-child(1)");
    firstInput.focus();
    hasInitiatedFocus = true;
    // 移除监听，避免重复触发
    document.removeEventListener('touchstart', triggerInputFocus);
    document.removeEventListener('click', triggerInputFocus);
  }
}

// 同时监听触摸和点击事件，覆盖不同场景
document.addEventListener('touchstart', triggerInputFocus, { passive: true });
document.addEventListener('click', triggerInputFocus, { passive: true });

2. 优化输入框属性提升兼容性 #

调整输入框的 type 属性为 tel，iOS 对电话类型的输入框键盘唤起逻辑更友好，配合 inputmode="numeric" 确保弹出纯数字键盘：

修改 HTML 中的所有输入框：

<input type="tel" pattern="[0-9]*" inputmode="numeric" maxlength="6" autocomplete="off">
<input type="tel" pattern="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
<!-- 其他输入框同理修改type -->

3. 移除冲突的 autofocus 属性 #

原代码中第一个输入框的 autofocus 属性在 iOS Safari 中几乎无效，还可能和脚本触发的焦点逻辑冲突，建议直接移除。

关键注意事项 #

• 不要尝试用 setTimeout 延迟触发 focus()，哪怕延迟几秒，只要不是用户直接交互触发，iOS 都会拦截键盘唤起。
• 必须在真实 iOS 设备上测试，模拟器的键盘触发逻辑和真机存在差异。
• 所有方案都必须基于用户主动交互，这是符合苹果规则的唯一途径，不存在完全无交互的"绕过"方法。

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