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

前言

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

解决办法

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

代码实现

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;