Hybird移動端虛擬鍵盤引發的問題怎么解決

這篇文章主要講解了“Hybird移動端虛擬鍵盤引發的問題怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Hybird移動端虛擬鍵盤引發的問題怎么解決”吧！

在工作的過程中無論是與原生結合的Hybird的H5頁面或者微信公眾號頁面都會遇到當觸發鍵盤輸入行為時，頁面窗口往上離開屏幕（與iOS的適配）或者頁面高度變?。ㄔ谖⑿胖写蜷_頁面等），現在我們來分析一下各種情況以及解決的方法。

iOS中頁面往上頂的情況

// 兼容ios彈出鍵盤改變頁面問題
if (_browser.versions.ios) { //判斷是否為ios環境
    $('body').on("blur", 'input', function() { //用原生js的addEventListener也是可以的
    setTimeout(function() {
        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
            window.scrollTo(0, Math.max(scrollHeight - 1, 0));
         }, 100);
    })
};

Tips：

• _browser.versions.ios用于判斷是否為ios環境，詳情可見本人另一篇文章《判斷環境為iOS或Android》，當然你也可以用你自己的判斷方法。

• blur當在ios環境中，點擊input或者textare都會觸發虛擬鍵盤彈出以及改變頁面高度，這時候當我們收起鍵盤時想要將頁面高度還原就相當于當失去焦點的時候頁面滾動回底部。（在最近一點版本的safair中我卻發現頁面會主動的還原，而微信公眾號打開的頁面卻不會，這可能是新版的safair已經修復了這個問題，而微信的瀏覽器內核依舊是舊版本的safair內核）。

• setTimeout這個定時器是為了在頁面恢復高度的時候顯得更加平滑，這個看項目情況自主設置。

• 獲取當前頁面的滾動條縱坐標位置在標準w3c下，document.body.scrollTop恒為0，但是某些內核中又不含有document.documentElement.scrollTop，所以我們需要這樣獲取滾動條高度:var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;

• window.scrollTo(xpos,ypos)

• Math.max(scrollHeight - 1, 0)
  防止取到null或者underfind

Android鍵盤遮擋輸入框問題

//安卓鍵盤遮擋問題
if (_browser.versions.android) {
    window.addEventListener("resize", function() {
    if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA"){
        window.setTimeout(function() {
           document.activeElement.scrollIntoViewIfNeeded();
        }, 0);
    }
  })
};

Tips:

• resize為監聽頁面發生變化時觸發的事件，這是應為Android彈出虛擬鍵盤的效果與ios是不一樣的，Android相當于將窗口高度縮小，所以才不會像ios那樣出現下面空白。

• document.activeElement此API為獲取當前活動元素，包含聚焦。

• document.activeElement.scrollIntoViewIfNeeded();這個API的作用就是把綁定的元素移動到可見區域，當然要是你在ios中也有遮擋問題，也可以這么設置。

感謝各位的閱讀，以上就是“Hybird移動端虛擬鍵盤引發的問題怎么解決”的內容了，經過本文的學習后，相信大家對Hybird移動端虛擬鍵盤引發的問題怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！