React中屏幕键盘激活时的界面适配问题及解决方案

在React项目中，激活input/textarea时，屏幕键盘弹出会导致页面高度变化，进而出现部分元素不可用、元素重叠的问题。我之前尝试用useRef解决，遇到两个棘手问题：

• 关闭键盘后input/textarea仍处于激活状态，其他元素无法操作
• 无法自动滚动到目标元素，需要多次点击

下面是我总结的完整解决方案：

1. 自动滚动到输入框的工具函数 #

这个函数优先利用window.visualViewport（虚拟键盘API）监听视口尺寸变化，确保输入框能自动滚动到可视区域；同时设置超时兜底，兼容不支持该API的环境：

const scrollToElement = (elementId) => {
    const element = document.getElementById(elementId);
    if (element && window.visualViewport) {
        const scrollHandler = () => {
            element.scrollIntoView({block: "start", inline: "nearest", behavior: "smooth"});
            window.visualViewport.removeEventListener('resize', scrollHandler);
        };

        window.visualViewport.addEventListener('resize', scrollHandler);

        setTimeout(() => {
            window.visualViewport.removeEventListener('resize', scrollHandler);
            element.scrollIntoView({block: "start", inline: "nearest", behavior: "smooth"});
        }, 1000);
    } else if (element) {
        element.scrollIntoView({block: "start", inline: "nearest", behavior: "smooth"});
    }
};

使用方式 #

在input/textarea的onFocus事件中调用该函数，传入对应元素的ID：

<textarea id="target-textarea" onFocus={() => scrollToElement('target-textarea')} />

2. 解决关闭键盘后输入框仍激活的问题 #

添加全局点击监听，点击非输入区域时自动让所有输入框失焦：

import { useEffect } from 'react';

const YourComponent = () => {
  useEffect(() => {
    const handleClickOutside = (e) => {
      const inputs = document.querySelectorAll('input, textarea');
      inputs.forEach(input => {
        if (!input.contains(e.target)) {
          input.blur();
        }
      });
    };

    document.addEventListener('click', handleClickOutside);
    return () => document.removeEventListener('click', handleClickOutside);
  }, []);

  // 组件其他逻辑...

  return (
    // 组件JSX...
  );
};

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