Next.js非固定布局Web应用中，如何解决iOS键盘遮挡输入框的问题？

兄弟，我之前做Next.js项目的时候也踩过iOS键盘遮挡输入框的坑，一个个页面给输入框加监听实在太繁琐了，后来折腾出几个全局化的方案，一次配置全项目生效，给你分享下：

方案一：全局监听焦点事件（推荐，一次配置全项目生效） #

直接在Next.js的全局入口文件里配置，所有页面的输入框、文本域、下拉框都会自动适配，再也不用挨个加代码。

如果你用的是Pages Router，就在pages/_app.jsx（或tsx）里加这段逻辑：

import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const handleInputFocus = (e) => {
      const target = e.target;
      // 只处理可输入的表单元素
      if (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)) {
        // 获取元素相对于视口顶部的距离，留出50px的安全边距
        const elementViewportTop = target.getBoundingClientRect().top;
        const safeOffset = 50;
        
        // 只有当元素靠近视口顶部（可能被键盘遮挡）时才滚动
        if (elementViewportTop < safeOffset) {
          // 计算需要滚动的目标位置，保证元素上方有足够空间
          const scrollTargetY = window.scrollY + elementViewportTop - safeOffset;
          window.scrollTo({
            top: scrollTargetY,
            behavior: 'smooth'
          });
        }
      }
    };

    // 监听全局的focusin事件（支持冒泡，能捕获所有输入元素的聚焦）
    document.addEventListener('focusin', handleInputFocus);
    
    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      document.removeEventListener('focusin', handleInputFocus);
    };
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

要是你用的是App Router（app目录），把这段逻辑放到根layout.jsx的useEffect里就行，效果是一样的。

方案二：CSS辅助优化（配合全局监听，增强兼容性） #

iOS键盘弹起后会压缩视口高度，有时候JS计算会有偏差，给全局滚动容器加些CSS能让效果更稳：

body {
  overflow-x: hidden;
  overflow-y: auto;
  /* 保持iOS原生滚动的流畅感 */
  -webkit-overflow-scrolling: touch;
}

/* 当页面内有输入框聚焦时，给body加底部内边距，预留键盘空间 */
body:focus-within {
  padding-bottom: 200px;
  /* 如果你知道自己项目里键盘的大致高度，可以调整这个值 */
}

这个CSS和方案一配合使用，能避免一些极端场景下的滚动偏差。

方案三：封装自定义输入组件（适合不想全局监听的场景） #

如果你不想全局配置，也可以把滚动逻辑封装成自定义输入组件，后续所有输入框都用这个组件：

import { useRef, useEffect } from 'react';

const CustomInput = ({ placeholder, ...restProps }) => {
  const inputRef = useRef(null);

  useEffect(() => {
    const handleFocus = () => {
      if (!inputRef.current) return;
      
      const elementViewportTop = inputRef.current.getBoundingClientRect().top;
      const safeOffset = 50;
      
      if (elementViewportTop < safeOffset) {
        const scrollTargetY = window.scrollY + elementViewportTop - safeOffset;
        window.scrollTo({ top: scrollTargetY, behavior: 'smooth' });
      }
    };

    const inputElement = inputRef.current;
    if (inputElement) {
      inputElement.addEventListener('focus', handleFocus);
      // 组件卸载时移除监听
      return () => inputElement.removeEventListener('focus', handleFocus);
    }
  }, []);

  return <input ref={inputRef} placeholder={placeholder} {...restProps} />;
};

export default CustomInput;

以后项目里用<CustomInput />代替原生的<input />，就能自动带滚动适配逻辑了。

几个注意事项： #

• 一定要用真实iOS设备测试，模拟器的键盘行为和真机可能不一样
• 尽量用getBoundingClientRect()获取元素位置，不要用offsetTop——后者是相对于父元素的，复杂布局里容易算错
• 如果你的页面有自定义滚动容器（不是body滚动），要把监听和CSS都改成针对这个容器的

我自己项目里用的是方案一，至今没再碰到键盘遮挡的问题，你可以根据自己的项目结构选最适合的~

内容来源于stack exchange