找了好多“ios键盘唤起,键盘收起以后页面不归位问题解决”的解决办法,大部分都是以修改样式为主,但修改完成之后,效果不大,还是会重复出现这个问题,直到因为这个bug而加班才得以解决。
话不多说直接上代码,为了方便学习直接转载啦~
注:这段代码如果手机输入中文,不选择中文的情况下,还是会出现页面顶上去
var u = navigator.userAgent;
var flag;
var myFunction;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isIOS) {
document.body.addEventListener('focusin', function () {
flag = true;
clearTimeout(myFunction);
})
document.body.addEventListener('focusout', function() {
flag = false;
if (!flag) {
myFunction = setTimeout(function () {
window.scrollTo({ top: 0, left: 0, behavior: "smooth" })//重点 =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变,并不一定要回到页面顶部)
}, 200);
} else {
return
}
})
}
下图为上述方法所提及的bug
下面这段代码可以解决上述ios问题:
var u = navigator.userAgent;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
$("input").blur(function(){
if (isIOS){
setTimeout(function() {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 0);
}
})