微信中使用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
            }
        }
相關文章
相關標籤/搜索