H5软键盘弹起收回（IOS与Android）

Posted 2021-02-05 奕佚

ios下中，软键盘处于窗口最顶层，与原有的窗口不冲突，所以底部导航条不会被顶起，但是在android下，软键盘与窗口处于同一层，所以当软键盘弹起时，当前窗口缩小，那么窗口内容自然要被挤；

解决办法：

安卓机：通过判断当前窗口的resize来判断窗口是否变化；

//判断当前设备
var browser = {
    versions: function () {
        var u = navigator.userAgent, app = navigator.appVersion;
        return {
            trident: u.indexOf(‘Trident‘) > -1, //IE内核
            isOpera: u.indexOf("Opera") > -1,
            isIEbrowser: u.indexOf("compatible") > -1 && u.indexOf("MSIE") > -1 && !(u.indexOf("Opera") > -1),//判断是否IE<11浏览器
            isEdge: u.indexOf("Edge") > -1,
            presto: u.indexOf(‘Presto‘) > -1, //opera内核
            webKit: u.indexOf(‘AppleWebKit‘) > -1, //苹果、谷歌内核
            gecko: u.indexOf(‘Gecko‘) > -1 && u.indexOf(‘Khtml‘) === -1,//火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1, //android终端
            iPhone: u.indexOf(‘iPhone‘) > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf(‘iPad‘) > -1, //是否iPad
            webApp: u.indexOf(‘Safari‘) === -1, //是否web应该程序，没有头部与底部
            weixin: u.indexOf(‘MicroMessenger‘) > -1, //是否微信 （2015-01-22新增）
            qq: u.match(/sQQ/i) === " qq" //是否QQ
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
};

function judgeDeviceType(){
    if(browser.versions.android){
        var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
        $(window).resize(function(){
            var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
            if(resizeHeight<originalHeight){//软键盘弹起
                $(‘footer‘).hide();
            }else{
                $(‘footer‘).show();
            }
       });
    }

}

 IOS下，用resize方法监测不出软键盘的收起，只能用输入框获取焦点与失去焦点的方式判断；