原因是因为
在弹出层点击input时调起键盘,页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset不变,造成焦点错位。
安卓手机点击时调起键盘不会把页面顶上去,会改变窗口高度变化,收起时不会造成影响
var u = navigator.userAgent;
var flag;
var myFunction;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isIOS) {
document.body.addEventListener(‘focusin‘, () => { //软键盘弹起事件
flag = true;
clearTimeout(myFunction);
})
document.body.addEventListener(‘focusout‘, () => { //软键盘关闭事件
flag = false;
if (!flag) {
myFunction = setTimeout(function () {
window.scrollTo({ top: 0, left: 0, behavior: "smooth" })//重点 =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变,并不一定要回到页面顶部)
}, 200);
} else {
return
}
})
} else {
return
}
还有一种方法 但是我没有验证是否可以
$(‘input,select‘).on(‘blur‘,function(){ $(window).scrollTop(0) }) 监听 blur事件 失去焦点滚动到底部或者顶部一类的
原文:https://www.cnblogs.com/wang-xx/p/14863233.html