React应用中如何解决iOS Safari输入框自动聚焦失效问题？

iPhone Safari对input.focus()的调用有严格限制，核心规则是必须在用户主动触发的交互事件（比如touchstart、click）的同步回调中执行，非用户触发的场景（比如页面load、setTimeout异步回调）会被浏览器拦截。针对你的问题，给几个可行的解决办法：

• 确保focus()在用户交互上下文内执行
  把focus()调用放在用户触摸或点击事件的同步回调里，比如绑定一个触发按钮，或者监听页面的首次触摸事件：

  // 示例：点击按钮触发输入框聚焦
  document.querySelector('#focus-trigger').addEventListener('touchstart', () => {
    document.getElementById('your-input').focus();
  });
  

• 避免异步操作脱离交互上下文
  哪怕是setTimeout(() => {}, 0)这种微任务，也会让代码脱离用户交互的上下文，导致Safari阻止聚焦。如果必须处理异步逻辑，尽量在交互事件的回调内完成所有操作，或者尝试用requestAnimationFrame替代（部分场景有效）：

  // 错误示例：异步回调会被拦截
  // document.querySelector('#focus-trigger').addEventListener('touchstart', () => {
  //   setTimeout(() => {
  //     document.getElementById('your-input').focus(); // Safari不生效
  //   }, 0);
  // });
  

• 检查输入框状态
  确认输入框没有设置disabled或readonly属性，这两个状态下原生focus()方法本身就不会生效。另外尽量使用原生<input>/<textarea>标签，避免用自定义封装的输入组件干扰原生行为。

• 页面加载自动聚焦的替代方案
  Safari不允许页面加载时自动触发聚焦（非用户交互），如果需要类似效果，可以监听用户首次触摸页面的事件，触发一次聚焦：

  // 页面首次触摸时自动聚焦输入框
  document.addEventListener('touchstart', function setupFocus() {
    document.getElementById('your-input').focus();
    // 只执行一次，移除监听
    document.removeEventListener('touchstart', setupFocus);
  }, { once: true });
  

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