关于javascript:移动端输入框被挤出视口的解决方案

场景

设施：pad
模式：APP 内置 webview，固定横屏。
场景：弹窗内表单输出信息。
实现：modal 采纳固定定位，flex 布局的形式，使 form-container 居中显示。

<div class="modal">
    <div id="form-container">
         <input>
         ...// 此处略去 n 个表单
    </div>
</div>

bug：当 modal 的高度固定是 100% 时，点击输入框，页面被键盘顶起，输入框被挤出视口。

解决方案：

#form-container {position:relative;}

window.onresize = function(){
   // 计算输入框离窗口顶部的间隔
   let toTop = document.activeElement.getBoundingClientRect().top;
   // 滚动页面 使输入框间隔顶部 100px，top 值为 -100px；const formEle = document.getElementById("form-container")
   if(top < 0) {formEle.style.top = -top;} else {formEle.style.top = 0;}
}