在iOS设备下，h5的input框失焦后页面被顶起来一部分bug解决

xiguadada 发布于2019-08-23 14:51 / 1302人阅读

摘要：在之后，的框失焦后页面会出现被顶上去一部分的下面就来看下怎么解决这个，首先我们必须知道这两个方法软键盘弹起事件软键盘关闭事件。

在iOS12之后，h5的input框失焦后页面会出现被顶上去一部分的bug,下面就来看下怎么解决这个bug，首先我们必须知道这两个方法focusin(软键盘弹起事件)、focusout(软键盘关闭事件)
。
注意：这里的input框的位置是在页面的底部

废话不多说，直接上代码
//解决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", () => {  //软键盘弹起事件
            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
    }

看到评论可能有很多人不知道这个bug怎么来的，请看下面的截图

GPU云服务器云服务器框失焦后失焦后 html页面部分跳转 ios webrtc bug

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101263.html

解决IOS中input失焦后，页面上移，点击不了问题

摘要：在失焦后，发现的页面会停止不下来，并且页面上的输入框，按钮点击事件，全部都移位了，需要滑动一下才可以正常。 IOS在Input失焦后，发现body的页面会停止不下来，并且页面上的输入框，按钮点击事件，全部都移位了，需要滑动一下才可以正常。 showImg(https://segmentfault.com/img/bVbnN8b?w=471&h=485); showImg(https:/...

nevermind 2019-08-23 14:58 评论0 收藏0
前端系列——与众不同的移动端底部固定栏 fixed、absolute 兼容 iOS 和 Androi

摘要：底部定位为的情况下激活输入框时，底部不会弹出来合理。后遗症底部按钮和输入框区域一起随着滚动，不再置顶独立。当滚动区域超过一屏幕时，底部输入框定位出现错乱。传统解决办法通常将底部设置为，当激活输入框的时候，将底部定位改为，即可兼容和。相信我，我分享的和你在其他博客上看到的终极方案是如此的与众不同！做过移动端开发的同学，对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧，底部DOM设置...

Doyle 2019-08-21 17:56 评论0 收藏0
ios12中遇到的带input弹窗的错位问题

摘要：问题描述使用定位的弹窗，在的系统里，软键盘调起后，页面整体上移，当软键盘消失时，视觉上页面已经回到原始位置，但其实弹窗的焦点位置仍在软键盘调起时的位置。问题描述：使用fixed定位的弹窗，在ios12的系统里，软键盘调起后，页面整体上移，当软键盘消失时，视觉上页面已经回到原始位置，但其实弹窗的焦点位置仍在软键盘调起时的位置。解决办法：这也是参考某位大佬的解决办法 documen...

henry14 2019-08-26 13:49 评论0 收藏0