iPhone Safari浏览器下React-Simple-Chatbot输入框无法自动唤起键盘如何解决

iOS Safari 出于用户体验考量，默认禁止非用户主动交互触发的代码调用输入框focus唤起键盘，只有同步执行在用户主动触发的交互事件（click、tap、touchend等）回调中的focus操作才能有效唤起键盘，异步上下文（setTimeout、接口请求回调、Promise异步回调等）中的focus操作会被 Safari 直接拦截。

可行解决方案 #

• 调整focus调用时机
  将chatbot.input.focus()逻辑移动到用户主动交互的同步回调中执行，不要放在异步流程里。你可以检查fork的React-Simple-Chatbot源码中focus逻辑的调用位置，如果是放在了异步回调（比如消息渲染动画的结束回调、定时器）中，把它移动到触发输入状态切换的同步逻辑里即可。
• 预占交互权限适配异步场景
  如果必须在异步场景下触发键盘，可以提前在用户主动交互的同步流程中预占交互权限：

  // 用户主动触发的交互回调（比如点击开始聊天按钮的同步逻辑）
  const inputDom = chatbot.input;
  // 先临时激活一次输入框，拿到唤起键盘的权限
  inputDom.removeAttribute('readonly');
  inputDom.focus();
  inputDom.blur();
  
  // 后续异步流程中再次调用focus即可正常唤起键盘
  fetch('/xxx').then(res => {
    // 其他逻辑
    inputDom.focus();
  })
  

• 补充输入框属性配置
  确保你的输入框满足以下条件：
  • 没有设置disabled属性，readonly属性在调用focus前要移除
  • React 场景下确保你拿到的是原生input DOM节点，而非styled-components封装的组件实例，建议直接用useRef绑定原生输入框
  • 不需要调用chatbot.input.click()，iOS 不会识别代码模拟的点击为用户主动交互，这段代码无效可以直接删除
• 优先用touch事件触发
  绑定touchend事件替代click事件执行focus逻辑，iOS 对touch事件的交互权限校验更宽松，触发优先级也更高。

内容的提问来源于stack exchange，提问作者Simon Rieß