手机模式input框输入框收起键盘失焦后强制让页面归位

苹果手机在input失焦时键盘缩回缩后，页面不归位解决方法

$("input").on("blur",function(){
    window.scroll(0,0); //让页面归位
});

以下方法失焦时，复位的滚动条位置：在每次输入操作时，首个聚焦表单元素前的滚动条位置

JQ使用：(当页面有滚动时用这个方法，要不然pc端有问题，用上方方法要触发两次)

var sT, sTimer;
$('input , textarea').on('focus',function(){
    if(sTimer){
        clearTimeout(sTimer);
    }else{
        sT = document.documentElement.scrollTop || document.body.scrollTop;
    }
});
$('input , textarea').on('blur',function(){
    sTimer = setTimeout(function(){
        window.scrollTo(0,sT);
    },100);
});

vue使用JS部分：

data() {
    return {
        sT:null,
        sTimer:null,
    }
},
methods:{
    // 苹果手机页面不归位，页面移位至最后一个失焦的input显示最合适的位置
    inputFocus(){
        if(this.sTimer){
            clearTimeout(this.sTimer);
        }
        // else{
            this.sT = document.documentElement.scrollTop || document.body.scrollTop;
        // }
    },
    inputBlur(){
        this.sTimer = setTimeout( () => {
            window.scrollTo(0,this.sT);
        },100);
    },
}

 

原链接：https://blog.csdn.net/qq_16494241/article/details/88021202

 // 处理iOS 微信客户端弹窗状态下调起输入法后关闭输入法页面元素错位解决办法

var ua = window.navigator.userAgent.toLowerCase();
        if (/iphone|ipod|ipad/i.test(navigator.appVersion) && /MicroMessenger/i.test(ua)) {
            document.body.addEventListener('focusout', () => {
                window.scrollTo({
                    top: 0,
                    left: 0,
                    behavior: 'smooth'
                })
            })
        }