iOS12之后,h5的input框失焦后页面会出现被顶上去一部分的bug,下面就来看下怎么解决这个bug,首先我们必须知道这两个方法focusin(软键盘弹起事件)、focusout(软键盘关闭事件)。
参考了一些资料,不多说上代码
首先我获取到了输入框的位置,在失去焦点的时候还是保持在输入框的位置,不回到顶部,这就解决了Bug
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
var u = navigator.userAgent;
var flag;
var myFunction;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios 终端
if(isIOS){
// alert(9999)
document.body.addEventListener('focusin', () => { //软键盘弹起事件
flag=true;
clearTimeout(myFunction);
})
document.body.addEventListener('focusout', () => { //软键盘关闭事件
flag=false;
if(!flag){
myFunction = setTimeout(function(){
//重点 =======当键盘收起的时候让页面回到原始位置(这里的top可以根据个人的需求改变,并不一定要回到页面顶部)
window.scrollTo({top:scrollTop,left:0,behavior:"smooth"})
},200);
}else{
return
}
})
}else{
return
}