Hybird移動(dòng)端虛擬鍵盤引發(fā)的問題怎么解決

這篇文章主要講解了“Hybird移動(dòng)端虛擬鍵盤引發(fā)的問題怎么解決”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Hybird移動(dòng)端虛擬鍵盤引發(fā)的問題怎么解決”吧！

在工作的過程中無論是與原生結(jié)合的Hybird的H5頁面或者微信公眾號(hào)頁面都會(huì)遇到當(dāng)觸發(fā)鍵盤輸入行為時(shí)，頁面窗口往上離開屏幕（與iOS的適配）或者頁面高度變小（在微信中打開頁面等），現(xiàn)在我們來分析一下各種情況以及解決的方法。

iOS中頁面往上頂?shù)那闆r

// 兼容ios彈出鍵盤改變頁面問題
if (_browser.versions.ios) { //判斷是否為ios環(huán)境
    $('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環(huán)境，詳情可見本人另一篇文章《判斷環(huán)境為iOS或Android》，當(dāng)然你也可以用你自己的判斷方法。

• blur當(dāng)在ios環(huán)境中，點(diǎn)擊input或者textare都會(huì)觸發(fā)虛擬鍵盤彈出以及改變頁面高度，這時(shí)候當(dāng)我們收起鍵盤時(shí)想要將頁面高度還原就相當(dāng)于當(dāng)失去焦點(diǎn)的時(shí)候頁面滾動(dòng)回底部。（在最近一點(diǎn)版本的safair中我卻發(fā)現(xiàn)頁面會(huì)主動(dòng)的還原，而微信公眾號(hào)打開的頁面卻不會(huì)，這可能是新版的safair已經(jīng)修復(fù)了這個(gè)問題，而微信的瀏覽器內(nèi)核依舊是舊版本的safair內(nèi)核）。

• setTimeout這個(gè)定時(shí)器是為了在頁面恢復(fù)高度的時(shí)候顯得更加平滑，這個(gè)看項(xiàng)目情況自主設(shè)置。

• 獲取當(dāng)前頁面的滾動(dòng)條縱坐標(biāo)位置在標(biāo)準(zhǔn)w3c下，document.body.scrollTop恒為0，但是某些內(nèi)核中又不含有document.documentElement.scrollTop，所以我們需要這樣獲取滾動(dòng)條高度: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為監(jiān)聽頁面發(fā)生變化時(shí)觸發(fā)的事件，這是應(yīng)為Android彈出虛擬鍵盤的效果與ios是不一樣的，Android相當(dāng)于將窗口高度縮小，所以才不會(huì)像ios那樣出現(xiàn)下面空白。

• document.activeElement此API為獲取當(dāng)前活動(dòng)元素，包含聚焦。

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

感謝各位的閱讀，以上就是“Hybird移動(dòng)端虛擬鍵盤引發(fā)的問題怎么解決”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Hybird移動(dòng)端虛擬鍵盤引發(fā)的問題怎么解決這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！