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

web Rookie

已于 2024-06-02 23:34:26 修改

阅读量434

点赞数 2

分类专栏：工作文章标签： javascript react.js 前端

于 2024-06-02 23:34:13 首次发布

本文链接：https://blog.csdn.net/cx18333/article/details/139399753

版权

工作专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言

遇到了在输入框输入时底部按钮被虚拟键盘上去的问题，把解决办法分享一下

解决办法

文本通过监听页面高度的变化对按钮进行隐藏控制

代码实现

import React, {useState } from "react";

const BottomView = ({ children, ...props }: any) => {
  const defaultPageHeight = document.documentElement.clientHeight;

  const [isBtn, setIsBtn] = useState(true);

  window.onresize = () => {
    if (defaultPageHeight > document.documentElement.clientHeight) {
      setIsBtn(false);
    } else {
      setIsBtn(true);
    }
  };

  if (isBtn) {
    return <div {...props}>{children}</div>;
  }
  return "";
};

export default BottomView;