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

场景

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

    

         
         ...//此处略去n个表单
    

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;
   }
}