在iOS設備下，h5的input框失焦后頁面被頂起來一部分bug解決

xiguadada 發布于2019-08-23 14:51 / 1312人閱讀

摘要：在之后，的框失焦后頁面會出現被頂上去一部分的下面就來看下怎么解決這個，首先我們必須知道這兩個方法軟鍵盤彈起事件軟鍵盤關閉事件。

在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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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