有输入框的页面，键盘弹起时，底部 fixed 的按钮被顶起来的解决方案

1. 添加标识：

页面初始化时，记录 innerHeight，同时监听 resize 事件。在 resize 事件中，当获取到的 innerHeight 比记录的初始值小的时候，表示键盘弹起，此时为 html 加 data-resize 属性，值为true，反之值为 false。加完属性后，更新 innerHeight 的初始值为 window.innerHeight。

// 闭包记录初始值
let { innerHeight } = window;

// 键盘弹起判断条件
function isKeyboardUp(){
    return window.innerHeight < innerHeight;
}

// 添加全局标识
export funtion addKeyboardUpTag(){
    const result = isKeyboardUp();
    document.documentElement.setAttribute("data-resize", result);
    // 更新最新值
    innerHeight = window.innerHeight;
}

// 屏幕旋转后重置闭包数据
window.addEventListener("orientationchange", () => {
    innerHeight = 0;
}, false);

2. 引入文件

import { addKeyboardUpTag } from "../add-keyboard-up-tag"

function App(){
    addKeyboardUpTag()
    window.addEventListener("resize", (event) => {
        addKeyboardUpTag()
    });
    return <div />
}

3. 根据标识进行元素隐藏

在有问题的页面，通过以下 css 控制按钮是否展示：

[data-resize="true"]{ 
    .button {
        display: none; 
    }
}

[data-resize="false"]{ 
    .button {
        display: block; 
    }
}

温馨提示：此方案适用于键盘弹起时，前端页面不滚动的情况。如果你想实现，键盘弹起后，用户能滚动页面把按钮展示出来继续操作的话，此方案不适合。