在写移动端的网页应用的时候经常会遇到底部导航,或者说是底部菜单。而当触发虚拟键盘的时候,底部的导航会被顶起来,遮挡住网页内容。定位方法对此也并不管用。我这有两种解决方式(都基于jQuery)。

第一种:

1
2
3
4
5
6
7
//  这种方法的思路是,当输入框获得焦点的时候,就隐藏,失去焦点就显示
$('input[type=text],textarea').focus(function(){
$('footer').hide();
})
$('input[type=text],textarea').blur(function(){
$('footer').show();
})

但第一种方法有个缺点,就是当用户输入完成后可能只是收起了键盘,而此时输入框并没有失去焦点,但底部的导航还是隐藏状态,这样容易给用户造成困惑,所以第二种方法能很好地解决这个问题。

第二种:

1
2
3
4
5
6
7
8
9
10
//这种方法的思路是监听窗口高度的变化来判断是否有触发虚拟键盘,以此来控制底部导航的显示与隐藏
var height = $(window),height();
window.onresize = function(){
var n_height = $(window).height();
if( height != n_height ){
$('footer').hide();
}else{
$('footer').show();
}
}

第二种方法也间接解释了为什么会定位失效,因为因为虚拟键盘是把整个浏览器窗口顶起来了,而不是覆盖在浏览器上,所以定位在底部还是会在输入法上方。

上述第一种方法来自网络,由于时间太久,来源已无从考察;第二种方法是同事的思路,至于来源我并不清楚是来自网络还是自己远程,我只是在此做一个总结。