[分享]移动端输入框被挤出视口的解决方案

场景设备：pad模式：APP内置webview，固定横屏。场景：弹窗内表单输入信息。实现：modal采用固定定位，flex布局的方式，使formcontainer居中显示。 ...//此处略去n个...

场景

设备：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;
   }
}