iPad端requestAnimationFrame下contenteditable div无法聚焦求助

问题原因 #

iOS Safari对用户交互的安全性限制非常严格：只有在用户主动触发的同步事件链中执行的focus()操作，才能唤起系统键盘。你的代码中使用异步wait()（不管是requestAnimationFrame还是setTimeout）会打破这个事件链，导致浏览器拦截focus操作，无法唤起键盘。另外，React的ref回调执行时机可能滞后于isEditing状态更新，导致focus时元素还未切换到可编辑状态。

解决方案 #

1. 用useEffect精准监听状态变化，同步执行focus #

放弃ref回调，改用useEffect监听isEditing的变化，确保在状态更新后立即执行聚焦操作，且保持在用户交互的上下文范围内：

import { useState, useEffect, useRef } from 'react';

function Edit() {
  const [isEditing, setEditing] = useState(false);
  const contentRef = useRef(null);

  useEffect(() => {
    if (!isEditing || !contentRef.current) return;

    // 强制设置contentEditable状态（确保DOM已更新）
    contentRef.current.contentEditable = 'true';
    
    // 主动创建选区，iOS需要这个才能稳定唤起键盘
    const range = document.createRange();
    const selection = window.getSelection();
    range.selectNodeContents(contentRef.current);
    range.collapse(true); // 光标定位到内容开头
    selection.removeAllRanges();
    selection.addRange(range);

    // 执行聚焦
    contentRef.current.focus();
  }, [isEditing]);

  return (
    <div className="box">
      <h1>{isEditing && <>Editable </>}Content</h1>
      <div
        ref={contentRef}
        contentEditable={isEditing}
        style={{ padding: '8px', border: isEditing ? '1px solid #ccc' : 'none' }}
      >
        Foo <b>bar</b>
      </div>
      <br/>
      <button
        onClick={() => setEditing(!isEditing)}
        className="button"
        style={{ touchAction: 'manipulation' }} // 消除iOS触摸延迟
      >
        Toggle edit
      </button>
    </div>
  );
}

function App() {
  return (
    <div className="box">
      <Edit />
    </div>
  );
}

2. 关键优化点 #

• 避免异步延迟：去掉所有requestAnimationFrame、setTimeout之类的异步操作，确保focus在isEditing状态更新后同步执行。
• 强制创建选区：iOS Safari单纯调用focus()可能不足以唤起键盘，必须主动创建文本选区，明确告诉浏览器要编辑内容。
• 消除触摸干扰：给按钮添加touch-action: manipulation CSS属性，避免iOS的300ms点击延迟和触摸事件冲突。
• 确保元素可见：contenteditable元素不能有display: none、opacity: 0或visibility: hidden等样式，否则iOS会忽略focus请求。

3. 极端情况的兜底方案 #

如果上述方法仍不稳定，可以尝试在按钮点击事件中直接处理聚焦（跳过状态更新的异步渲染）：

<button
  onClick={(e) => {
    e.preventDefault();
    const newEditingState = !isEditing;
    setEditing(newEditingState);
    if (newEditingState && contentRef.current) {
      contentRef.current.contentEditable = 'true';
      // 同上创建选区并focus
      const range = document.createRange();
      const selection = window.getSelection();
      range.selectNodeContents(contentRef.current);
      range.collapse(true);
      selection.removeAllRanges();
      selection.addRange(range);
      contentRef.current.focus();
    }
  }}
  className="button"
>
  Toggle edit
</button>

这种方式直接在用户点击的同步事件中执行focus，完全符合iOS的交互限制，稳定性最高，但需要注意状态更新和DOM操作的顺序。

内容的提问来源于stack exchange，提问作者Pavol Hejný