總結:蘋果系統H5頁面軟鍵盤彈出造成點擊事件失效


問題描述:蘋果系統,軟鍵盤彈出,鍵盤再收起時,原虛擬鍵盤位點擊事件無效。

排查過程:只有iphonex、iphone6,ihpone7等部分機型會出現該問題;

原因:在IOS下,點擊頁面中的input時,彈出軟鍵盤時,如果input比較靠下,整個頁面會上移,document.body.scrollOffset會由0變成大於0。 軟鍵盤消失后,頁面會下移。但是document.body.scrollOffset並不會變成0,所以這時候觸控不准;

解決辦法:失去焦點

 $('textarea,input').on('blur', function (event) {
            document.body.scrollTop = 0;
    });

 

或者
$("input").blur(function() { console.log("失去焦點"); window.scrollTo(0, 0); });

==========================新的處理辦法========================

//ios 軟鍵盤處理,頁面錯位恢復問題
var isReset = true;
    var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
    function scrollTO() {
        //軟鍵盤收起的事件處理
        isReset = true;
        setTimeout(function () {
            //當焦點在彈出層的輸入框之間切換時先不歸位
            if (isReset) {
                window.scrollTo(0, 0);//失焦后強制讓頁面歸位
            }
        }, 300);
    }

 if (isiOS) {//ios
      document.body.addEventListener('focusin', function () {
       //軟鍵盤彈出的事件處理
        isReset = false;
    });
    document.body.addEventListener('focusout', scrollTO);
}

 document.body.removeEventListener('focusout', scrollTO);

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM