前端jquery解決安卓手機端底部菜單欄被輸入法頂上去的方案

前段時間在做手機端,其中底部的菜單欄是用position:fixed布局,  效果如下圖

底部菜單欄DOM結構:

 

 

用PC瀏覽器測試的時候發現上面的輸入法在獲取以及失去焦點的時候, 底部的菜單欄是沒有任何問題的.但是一到手機上面測試,上面的輸入框獲取焦點后會自動彈出輸入法.  然后就出了問題,就是底部的菜單欄被輸入法頂上去了.效果如下圖所示:

然后我就想到了一個解決辦法,就是在輸入框獲取焦點的時候,把底部菜單欄給隱藏不就行了嗎?, 實際上確實可行.代碼如下圖

<script>
$("input[type='text']").on('focus', function () {
      $('.botmenu').hide();
})
$("input[type='text']").on('blur', function () {
      $('.botmenu').show();
})
</script>

　　但是,現在的輸入法一般在右上角都有一個隱藏輸入法的功能,比如上圖使用是百度輸入法,  點擊右上角的這個地方,

輸入法就會自己隱藏,或者按下手機的右邊返回按鍵(有的手機 返回按鍵是在左邊),輸入法也會自己隱藏掉.那么上面的解決辦法導致的問題就是:  輸入法隱藏后,   輸入框並沒有失去焦點,  底部的菜單欄也就不見了.效果圖如下所示:

因此,我們再來介紹另外一種解決方法

使用的是window.onresize事件,  onresize 事件會在窗口或框架被調整大小時發生。關鍵代碼

<script>

    window.onresize = function () {
        var  windowHeight= $(window).height();//獲取窗口的可見高度,不是整個文檔的高度
        var screenHeight = window.screen.availHeight;//獲取瀏覽器的屏幕的可用高度
        //alert(windowHeight+','+window.screen.availHeight);

        var u = navigator.userAgent;

        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
            if (windowHeight <= screenHeight / 2) {
                $('.botmenu').css({'position': 'absoult', 'display': 'none'});
            } else {
                $('.botmenu').css({'position': 'fixed', 'display': 'block'});
            }
        }
    }
    //alert($(window).height());
    //alert(window.screen.availHeight);
    $("input[type='text']").on('focus', function () {
        $('.botmenu').hide();
    })
    $("input[type='text']").on('blur', function () {
        $('.botmenu').show();
    })
</script>

 

此時,問題就已經全部解決了.

可參考文章:http://www.jb51.net/article/103445.htm    ;    http://blog.csdn.net/kongjiea/article/details/46545351