React输入框默认聚焦但移动端除外的实现方案问询

这个需求太贴合实际了——既要给桌面端用户提供直接输入的便捷性，又要避免移动端弹出键盘遮挡页面的尴尬。下面是几个简洁可靠的实现方案，你可以根据场景选择：

方案一：用window.matchMedia监听屏幕尺寸（首推） #

这个方法最灵活，不仅能在页面加载时判断设备，还能响应窗口大小变化（比如用户把浏览器从全屏缩成手机尺寸），完全适配动态场景。

代码示例：

import { useEffect, useRef } from 'react';

function SmartFocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    // 定义桌面端的阈值，这里用768px作为分界，你可以根据自己的设计调整
    const desktopMediaQuery = window.matchMedia('(min-width: 768px)');

    // 处理聚焦/失焦的逻辑
    const toggleFocus = (mediaQuery) => {
      if (inputRef.current) {
        mediaQuery.matches ? inputRef.current.focus() : inputRef.current.blur();
      }
    };

    // 页面加载时先执行一次
    toggleFocus(desktopMediaQuery);
    // 监听屏幕尺寸变化，实时调整
    desktopMediaQuery.addEventListener('change', toggleFocus);

    // 组件卸载时清理监听
    return () => {
      desktopMediaQuery.removeEventListener('change', toggleFocus);
    };
  }, []);

  return <input ref={inputRef} placeholder="请输入邮箱/手机号" />;
}

方案二：通过用户代理（UA）判断设备类型 #

如果你的场景不需要响应窗口大小变化，只需要在页面初始化时判断一次，用UA检测会更简洁：

import { useEffect, useRef } from 'react';

function SmartFocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    // 简单匹配常见移动设备的UA标识
    const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    // 非移动设备才自动聚焦
    if (!isMobileDevice && inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return <input ref={inputRef} placeholder="请输入内容" />;
}

⚠️ 注意：这种方法的局限性是UA可能被用户伪造，而且无法应对窗口尺寸变化的情况，适合需求简单的场景。

为什么不能直接用autoFocus？ #

原生的<input autoFocus />会无视设备类型，在所有终端上自动聚焦，完全不符合我们“区别对待”的需求，所以必须通过JS动态控制聚焦状态。

额外说下Facebook登录页的思路 #

其实它的实现逻辑和方案一差不多：通过检测视口宽度+设备特性，在桌面端自动激活输入框，移动端则保留用户手动触发的逻辑，既保证了桌面端的输入效率，又避免了移动端的遮挡问题。

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