ios键盘唤起,键盘收起以后页面不归位问题解决

找了好多“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);
        }
    })

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值