iPhone点击输入框不弹出键盘？原因与解决方案

在开发移动端网页或 PWA（渐进式 Web 应用）时，很多开发者会遇到一个令人困惑的问题：在 iPhone 的 Safari 浏览器中，点击 HTML 的 <input> 输入框后，虚拟键盘没有自动弹出。

常见原因分析

• 焦点被程序阻止：JavaScript 中调用了 e.preventDefault() 或未正确聚焦。
• 输入框被隐藏或不可见：例如通过 display: none、visibility: hidden 或位置偏移导致 Safari 认为该元素不可交互。
• 页面处于 iframe 中：某些情况下，Safari 对 iframe 内的输入框限制更严格。
• 使用了非标准事件触发聚焦：如在非用户手势（如 setTimeout）中调用 .focus()。
• iOS 系统策略限制：出于安全和用户体验考虑，Safari 只允许在用户直接操作（如点击）时弹出键盘。

解决方案示例

// ✅ 推荐：在用户点击回调中直接 focus
document.getElementById('btn').addEventListener('click', function() {
  const input = document.getElementById('myInput');
  input.removeAttribute('readonly'); // 如果之前设为 readonly
  input.focus(); // 必须在用户手势内调用
});

其他建议

• 避免在页面加载时自动聚焦输入框（autofocus 在 iOS 上通常无效）。
• 不要将输入框初始设为 display: none，可改用 opacity: 0; position: absolute; 等方式隐藏。
• 确保输入框的 font-size ≥ 16px，防止 Safari 自动缩放导致布局异常。
• 测试时使用真机，iOS 模拟器行为可能与真实设备略有差异。

总结

iPhone 上输入框不弹出键盘，本质是 Safari 对用户交互的安全限制。只要确保 focus() 调用发生在用户直接操作的同步上下文中，并保证输入框可见、可交互，即可正常唤起虚拟键盘。