react移动页面底部按钮被键盘顶起和输入键盘遮挡输入框填坑方案

需求描述：react技术栈，移动端实现一个H5表单网页，采用的是flex弹性布局，表单填写区域在上，提交按钮在固定在底部。

这种场景下，一定会遇到以下两个坑：

• 点击输入框，获取焦点事件后，手机输入键盘弹起，总是会把底部按钮顶上去。
• 如果输入框在页面下面的位置，键盘弹起后，会遮挡住要输入的区域，只有开始输入的时候才会滚动到输入的位置，用户体验非常不好。

• 解决以上两个坑：具体看代码

//在组件的did生命周期函数中加入
 componentDidMount() {
         // 内容区高度
        const h = document.body.scrollHeight;
 	//监听页面尺寸变化
 	window.addEventListener("resize", function () {
    		// 解决键盘弹起后遮挡输入框的问题
            if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
                window.setTimeout(function () {
                    document.activeElement.scrollIntoViewIfNeeded();
                }, 0);
            }
            
            //解决键盘弹起把固定在底部的按钮顶上去的问题
            //btnSubmit是按钮区域的的节点id
            const bottomBtn = document.querySelector("#btnSubmit");
            if (document.body.scrollHeight < h) {
                bottomBtn.style.display = "none";
            } else {
                bottomBtn.style.display = "block";
            }
 }
 

以上代码比较简单，但是基本上能够轻松解决这两个坑，特做记录。