H5软键盘弹起收回(IOS与Android)
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方法监测不出软键盘的收起,只能用输入框获取焦点与失去焦点的方式判断;