ios微信6.7.4键盘隐藏后留空白问题
由于公司的项目的需求,要实现一个聊天功能,在所有的需求开发完毕后,发现了一个bug,在苹果手机上,当输入框失去焦点,软键盘隐藏后,输入框不会下滑到底部,并且与底部之间留有大片空白。
在安卓手机上没有毛病,不知道怎么的平常溜到不行的苹果手机这次怎么发疯了,出现这么大的bug。由于功能需求,我引用了iframe框架,一开始我以为是iframe导致的fixed定位问题,毕竟在iframe中总会出现各种莫名其妙的问题。
但是!!!刚好我们 产品经理的手机没有更新微信,在她的微信中打开就一切正常,才确定是由于微信更新的引起的bug,知道问题在哪了,剩下的就是解决问题了,代码如下:
代码:
//微信(iOS)6.7.4版本输入框消失,底部出现空白的bug解决
//当输入框失去焦点,滑动页面
$('#msg').blur(function(){
resolveBug();
})
//微信版本bug解决方法
function resolveBug( e ){
setTimeout(function(){
// alert(1);
if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
return
}
let result = 'pc';
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
result = 'ios'
}else if(/(Android)/i.test(navigator.userAgent)) { //判断Android
result = 'android'
}
if( result = 'ios' ){
document.activeElement.scrollIntoViewIfNeeded(true);
}
},10)
}