乐趣区

关于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;}
}
退出移动版