ReactJS移动端如何让HTML输入框保持在键盘上方？

你现在靠动态计算keyBoardHeight调整聊天框高度的方式，很容易出现计算不准、响应滞后的问题，导致输入框没法稳定贴在键盘顶部。给你几个靠谱的修复方案：

• 用CSS固定定位替代动态高度计算
  直接把输入框容器固定在页面底部，不用依赖键盘高度计算。示例代码：

  <div ref={chatPageDiv} style={{ height: "100svh", position: "relative" }} className="top-0 z-10">
    {/* 聊天内容区：自动占满剩余空间 */}
    <div ref={chatBox} className="overflow-scroll h-[calc(100svh-150px)]">
    </div>
    {/* 输入框容器：固定在视口底部 */}
    <div style={{ position: "fixed", bottom: 0, left: 0, right: 0 }}>
      <ChatpageInput />
      {keyBoardHeight > 0 && <EmoteKeyBoard style={{ bottom: keyBoardHeight }} />}
    </div>
  </div>
  

  核心是利用position: fixed让输入框始终卡在视口底部，系统键盘弹出时会自动挤压页面空间，输入框自然就被顶到键盘上方了，比动态计算靠谱得多。

• 优化键盘高度的监听逻辑
  如果要适配表情键盘，得把键盘高度的监听改得更可靠：

  • 直接监听window.innerHeight的变化，键盘弹出时这个值会直接减少键盘的高度，比自定义计算准确
  • 用useEffect监听窗口尺寸变化，避免渲染时频繁修改状态：

    useEffect(() => {
      const handleResize = () => {
        const newHeight = window.innerHeight;
        // 差值超过100px才判定为键盘弹出/收起，过滤小幅度窗口变化
        if (Math.abs(newHeight - windowHeight) > 100) {
          setKeyBoardHeight(windowHeight - newHeight);
          setWindowHeight(newHeight);
        }
      };
      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
    }, [windowHeight]);
    

• 禁止页面滚动回弹干扰
  移动端键盘弹出时，页面可能会自动滚动导致输入框错位。给根容器加个CSS属性限制滚动：

  .chat-page-container {
    touch-action: pan-x; /* 只允许横向滚动，禁止纵向回弹 */
    overflow: hidden;
  }
  

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