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