微信中使用popup等弹窗组件时点击输入框input键盘弹起致使IOS中按钮无效处理办法

   由于在IOS微信中在弹窗中使用input使键盘弹起,使弹窗的位置上移,当键盘关闭时页面还在上面,弹窗位移量也在上面,只有下拉才能回到原位,这样弹窗也消失了。个人处理办法就是在键盘弹起和消失的时候,让页面都回到弹起以前的状态,使用了window.scrollTo方法。javascript

  

    keyUpClose () {
       let u = navigator.userAgent;
       let state; // 记录状态当关闭键盘时平滑滚动(smooth)一次页面
       let myFun;
       let isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            if(isIos){
                document.body.addEventListener('focusin', () => {  //软键盘弹起事件
                    state=true;
                    clearTimeout(myFun);
                })
                document.body.addEventListener('focusout', () => { //软键盘关闭事件
                    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                    state=false;
                    if(!state){
                        myFun= setTimeout(function(){  
                            window.scrollTo({top:scrollTop,left:0,behavior:"smooth"})//重点 ----当键盘收起的时候让页面回到原始位置(这里的top:scrollTop                 回到了弹窗弹起前状态)
                        },200);
                    }else{
                        return
                    }
                })
            }else{
                return
            }
        }
相关文章
相关标签/搜索