正文

H5页面关于android软键盘弹出顶起底部元素的解决方案

IP云
IP云V管理员/32 阅读
08/24
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

应用场景：用div在移动端页面设置一个底部工具栏，css的代码大概如下：

.tool{
width: 100%;
height: 60px;
position: fixed;
left: 0px;
bottom: 0px;
background-color: #000080
}

如果页面有一输入框<input type="text">，在点击输入框输入内容时，移动端软键盘弹起，这时这个div也一起弹起，顶在软键盘上面，会遮挡输入框，要用下面的方法去消除弹起来的div，主要思路是div弹起来后隐藏掉。

通过resize方法监听$(this).height()，获取页面高度，成功获得改变后的页面高度，软键盘弹出时隐藏被顶起的页面。

var winHeight = $(window).height(); //获取当前页面高度
$(window).resize(function(){
var thisHeight=$(this).height();
if(winHeight - thisHeight >50){
//当软键盘弹出，在这里操作
$(".顶起的页面").hide();
}else{
//当软键盘收起，在此处操作
$(".顶起的页面").show();
}
});

this是html对象 $(this)是jq对象，调用jq对象的height()方法。