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

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