React应用中useEffect在iOS设备上无法正确处理焦点问题

我正在开发一款React应用，使用自定义hook useFlipAnimation 管理卡片组件的翻转动画。需求是当卡片翻转到背面时，自动聚焦到内部的textarea元素以便输入。该功能在Android设备和Web浏览器中表现正常，但在iOS设备上完全失效。

代码概述 #

我们通过useEffect钩子，根据卡片当前面（front/back）和是否正在翻转（isFlipping）状态管理焦点：当卡片翻到背面且动画结束时，调用handleFocusMessage聚焦textarea；否则调用handleFocusOutMessage移除焦点。

useEffect(() => {
  if (side === 'back' && !isFlipping) {
    handleFocusMessage(); // 预期聚焦textarea
  } else {
    handleFocusOutMessage(); // 移除焦点
  }
}, [side, isFlipping, handleFocusMessage, handleFocusOutMessage]);

// 焦点处理函数
const handleFocusMessage = useCallback(() => {
  if (messageInputRef.current) {
    const input = messageInputRef.current;
    input.focus();
    if (input?.value) {
      const length = input.value.length;
      input.setSelectionRange(length, length);
    }
  }
}, []);

const handleFocusOutMessage = useCallback(() => {
  if (messageInputRef.current) {
    const input = messageInputRef.current;
    input.blur();
  }
}, []);

const messageInputRef = useRef<HTMLTextAreaElement | null>(null);

<MessageInput
  id={'message-input'}
  data-testid={'message-input'}
  ref={messageInputRef}
  value={text}
  onChange={handleInputChange}
  maxLength={150}
/>

// 样式定义
const MessageInput = styled.textarea`
  border: none;
  resize: none;
  width: 100%;
  height: 230px !important;
  color: ${({ theme }) => theme.colors.white};
  z-index: 80;
`;

问题详情 #

• 自动聚焦逻辑在翻转动画完成后触发
• 仅iOS设备存在此问题，Android和Web环境表现正常
• 调试日志确认handleFocusMessage和handleFocusOutMessage均在正确时机被调用

疑问解答与解决方案 #

1. iOS的焦点限制说明 #

iOS的Safari（包括WebView）有明确的安全限制：只有在用户主动交互（点击、触摸等）的事件回调链内，才能通过代码触发输入框的焦点。如果焦点操作是在异步回调、动画结束回调等非直接用户交互的时机执行，会被浏览器拦截，这就是iOS上失效的核心原因。

2. 可行的变通方案 #

方案一：将焦点逻辑绑定到用户交互事件链

既然翻转动画是由用户操作触发的，直接把焦点逻辑放到用户点击的回调中，通过requestAnimationFrame延迟到动画结束后执行（确保仍在用户交互的上下文范围内）：

const handleCardFlip = () => {
  // 触发翻转动画的原有逻辑
  flipCard();
  // 嵌套两层requestAnimationFrame确保动画完成后执行焦点操作
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      handleFocusMessage();
    });
  });
};

方案二：短延迟setTimeout兜底

如果无法直接绑定到用户交互事件，可尝试用短延迟的setTimeout触发焦点（利用iOS允许用户交互后短时间内执行焦点操作的规则）：

const handleFocusMessage = useCallback(() => {
  if (messageInputRef.current) {
    setTimeout(() => {
      const input = messageInputRef.current;
      input.focus();
      if (input.value) {
        input.setSelectionRange(input.value.length, input.value.length);
      }
    }, 100); // 延迟时间可根据动画时长调整
  }
}, []);

方案三：确保元素可见可交互

iOS会拒绝给不可见元素设置焦点，聚焦前强制确保textarea处于可见状态：

const handleFocusMessage = useCallback(() => {
  if (messageInputRef.current) {
    const input = messageInputRef.current;
    input.style.visibility = 'visible';
    input.style.opacity = '1';
    input.focus();
    if (input.value) {
      input.setSelectionRange(input.value.length, input.value.length);
    }
  }
}, []);

方案四：动态控制autofocus属性

通过状态动态切换textarea的autoFocus属性，配合key强制组件重新渲染：

<MessageInput
  key={`message-input-${side}`}
  id={'message-input'}
  data-testid={'message-input'}
  ref={messageInputRef}
  value={text}
  onChange={handleInputChange}
  maxLength={150}
  autoFocus={side === 'back' && !isFlipping}
/>

已尝试的解决方案 #

• 确认焦点逻辑不受异步状态更新影响
• 尝试在React生命周期外直接用原生JS设置焦点（iOS上表现不稳定）
• 考虑重构交互模型，但因功能需求（动画后自动聚焦）不可行

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