移动端input输入时底部按钮被虚拟键盘顶上解决办法

前言

在开发过程中，常常会遇到输入框获取焦点时，虚拟键盘弹出将底部按钮顶上去的问题，这不仅影响用户体验，还可能导致界面布局混乱。本文将分享一种有效的解决办法，通过监听页面高度变化来动态控制底部按钮的显示与隐藏，确保在虚拟键盘弹出时，按钮能够自适应布局，保持良好的用户交互性。

解决办法

主要思路是利用 JavaScript 监听页面高度的动态变化，以此判断虚拟键盘是否弹出。当页面高度变小时，意味着虚拟键盘被唤起，此时隐藏底部按钮；当页面高度恢复正常，则重新显示按钮。这种方式能够根据不同的设备和输入场景，灵活地调整按钮的可见性，有效避免了按钮被虚拟键盘遮挡的问题。

代码实现

以下是使用 React 框架实现的示例代码：

import React, { useState, useEffect } from "react";

// 定义 BottomView 组件，接收子元素作为参数
const BottomView = ({ children,...props }: any) => {
  // 获取初始页面高度
  const defaultPageHeight = document.documentElement.clientHeight;
  // 状态变量，用于控制按钮的显示与隐藏
  const [isBtnVisible, setIsBtnVisible] = useState(true);

  // 监听窗口大小变化的事件处理函数
  const handleResize = () => {
    // 当页面高度小于初始高度时，说明虚拟键盘弹出，隐藏按钮
    if (defaultPageHeight > document.documentElement.clientHeight) {
      setIsBtnVisible(false);
    // 否则，显示按钮
    } else {
      setIsBtnVisible(true);
    }
  };

  // 在组件挂载时添加窗口大小变化的监听器
  useEffect(() => {
    window.addEventListener('resize', handleResize);
    // 在组件卸载时移除监听器，避免内存泄漏
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  // 根据按钮的可见性状态返回相应的内容
  if (isBtnVisible) {
    return <div {...props}>{children}</div>;
  }
  return "";
};

export default BottomView;

总结

在上述代码中，首先获取初始页面高度。然后，在窗口大小发生变化时，通过比较当前页面高度与初始高度来更新按钮的可见性状态。使用useEffect钩子在组件挂载和卸载时分别添加和移除窗口大小变化的监听器，确保监听操作的正确性和性能优化。最后，根据按钮的可见性状态决定是否渲染按钮所在的div元素及其子元素，实现了底部按钮在虚拟键盘弹出时的自适应隐藏与显示。