移动端input框被虚拟键盘挡住的js解决方法

在webapp开发过程中，当用户切换输入法额时候，会出现输入框被弹起的虚拟键盘遮挡住的情况，这时用户输入只能盲填 ，这会验证影响用户体验。首先看下设计图：

实现上述布局，请参考文章：移动端H5固定底部导航菜单的三种布局实现

js的实现：

<script>
function fn(){
   var stop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
    var dom=document.getElementById('ipt');//获取input元素
    dom.onfocus=function(){
    	var interval = setInterval(function(){
           document.body.scrollTop = document.body.scrollHeight;
        },100);
    }
    dom.onblur=function(){
    	clearInterval(interval);//清除计时器
    	document.body.scrollTop = stop;//将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
    } 				
},	
</script>

需要在页面加载完成后调用该方法。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_875