移动端网页底部导航被虚拟键盘顶起解决方法

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

第一种：

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

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

第二种：

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

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

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