React+TypeScript开发：iOS Safari移动端Input获焦后键盘不弹出求助

问题原因 #

移动端浏览器为了防止恶意自动弹出键盘骚扰用户，设置了安全限制：仅当focus()调用来自用户主动触发的交互事件（如点击、触摸）时，才会唤起键盘。你当前在useEffect中直接调用focus()属于页面加载自动执行，不属于用户主动交互，因此浏览器会拦截键盘弹出，仅设置焦点但不唤起键盘。

解决方案 #

方案1：引导用户主动触发（最可靠，符合浏览器规范） #

添加一个触发区域，让用户点击后触发输入框焦点并唤起键盘：

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

import Container from '../../components/layout/Container';
import Button from '../../components/Button'; // 假设Button组件已导入
import React, { useRef, useState } from 'react';

const ContactForm = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);

  const handleFocusInput = () => {
    inputRef.current?.focus();
  };

  const nextStep = () => {
    // 你的下一步逻辑
  };

  return (
    <>
      <Container footerElement={<Button label='확인' onClick={nextStep} />}>
        {/* 引导用户点击触发 */}
        <div 
          onClick={handleFocusInput}
          css={css({ padding: '1rem', textAlign: 'center', color: '#666' })}
        >
          点击此处开始输入手机号
        </div>
        <input
          value={phoneNumber}
          onChange={(event) => setPhoneNumber(event.target.value)}
          ref={inputRef}
          type='tel'
          maxLength={11}
        />
      </Container>
    </>
  );
};

export default ContactForm;

方案2：利用页面首次用户交互自动触发 #

监听页面的首次触摸/点击事件，在用户第一次与页面交互时自动触发输入框焦点：

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

import Container from '../../components/layout/Container';
import Button from '../../components/Button';
import React, { useEffect, useRef, useState } from 'react';

const ContactForm = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);
  const hasTriggeredFocus = useRef(false);

  const nextStep = () => {
    // 你的下一步逻辑
  };

  useEffect(() => {
    const handleFirstInteraction = () => {
      if (!hasTriggeredFocus.current) {
        inputRef.current?.focus();
        hasTriggeredFocus.current = true;
        // 触发后移除监听，避免重复执行
        document.removeEventListener('touchstart', handleFirstInteraction);
        document.removeEventListener('click', handleFirstInteraction);
      }
    };

    // 绑定触摸和点击事件，覆盖不同交互场景
    document.addEventListener('touchstart', handleFirstInteraction);
    document.addEventListener('click', handleFirstInteraction);

    // 组件卸载时清理事件监听
    return () => {
      document.removeEventListener('touchstart', handleFirstInteraction);
      document.removeEventListener('click', handleFirstInteraction);
    };
  }, []);

  return (
    <>
      <Container footerElement={<Button label='확인' onClick={nextStep} />}>
        <input
          value={phoneNumber}
          onChange={(event) => setPhoneNumber(event.target.value)}
          ref={inputRef}
          type='tel'
          maxLength={11}
          autoFocus // 辅助部分浏览器自动获取焦点
        />
      </Container>
    </>
  );
};

export default ContactForm;

补充说明 #

• autofocus属性在部分移动端浏览器中可能生效，但iOS Safari等浏览器对其限制严格，仅在用户交互后才会触发，无法单独依赖它实现自动唤起键盘。
• 不要尝试用setTimeout延迟调用focus()，这种方式依赖浏览器计时机制，可靠性极低，大部分现代浏览器会直接拦截此类非交互触发的焦点请求。

内容的提问来源于stack exchange，提问作者고윤태