“?我們經(jīng)常需要填寫表單，鍵盤的行為存在各種差異。”

在 H5 項目中，我們會經(jīng)常遇到頁面中存在單個甚至多個 input/textarea 輸入框與底部固定元素的布局情況。在 input/textarea 輸入框獲取焦點時，會自動觸發(fā)鍵盤彈起，而鍵盤彈出在 ios 與 android 的 webview 中表現(xiàn)并非一致，同時當(dāng)我們主動觸發(fā)鍵盤收起時也同樣存在差異化。而無論如何，我們希望功能流暢的同時，盡量保持用戶體驗的一致性，因此有了下面一系列兼容性問題的研究。

01

—

鍵盤彈出的不同表現(xiàn)

• IOS：IOS 的鍵盤處在窗口的最上層，當(dāng)鍵盤彈起時，webview 的高度 height 并沒有改變，只是 scrollTop 發(fā)生變化，頁面可以滾動。且頁面可以滾動的最大限度為彈出的鍵盤的高度，而只有鍵盤彈出時頁面恰好也滾動到最底部時，scrollTop 的變化值為鍵盤的高度，其他情況下則無法獲取。這就導(dǎo)致在 IOS 情況下難以獲取鍵盤的真實高度。

• Android: webview 中留出空間，該空間小于等于的鍵盤空間，變化的高度差會隨著布局而不同，有的認(rèn)為?鍵盤高度 + 頁面高度 = 原頁面高度；?是錯誤的誤導(dǎo)，只有在某種很巧合的布局情況下才可套用此公式。

02

—

鍵盤收起的不同表現(xiàn)

• IOS：觸發(fā)鍵盤上的按鈕收起鍵盤或者輸入框以外的頁面區(qū)域時，輸入框會失去焦點，因此會觸發(fā)輸入框的 blur 事件。

• Android: 觸發(fā)鍵盤上的按鈕收起鍵盤時，輸入框并不會失去焦點，因此不會觸發(fā)頁面的 blur 事件；觸發(fā)輸入框以外的區(qū)域時，輸入框會失去焦點，觸發(fā)輸入框的 blur 事件。

03

—

監(jiān)聽鍵盤的彈出與收起

在 h5 中目前沒有接口可以直接監(jiān)聽鍵盤事件，但我們可以通過分析鍵盤彈出、收起的觸發(fā)過程及表現(xiàn)形式，來判斷鍵盤是彈出還是收起的狀態(tài)。

• 鍵盤彈出：輸入框獲取焦點時會自動觸發(fā)鍵盤的彈起動作，因此，我們可以監(jiān)聽輸入框的 focus 事件，在里面實現(xiàn)鍵盤彈出后所需的頁面邏輯。這在 ios 及 android 中表現(xiàn)一致。

• 鍵盤收起：從第 2 部分可知，觸發(fā)鍵盤收起的不同形式會存在差異化表現(xiàn)，當(dāng)觸發(fā)其他頁面區(qū)域收起鍵盤時，我們可以監(jiān)聽輸入框的 blur 事件，在里面實現(xiàn)鍵盤收起后所需的頁面邏輯。而在通過鍵盤按鈕收起鍵盤時在 ios 與 android 端存在差異化表現(xiàn)，下面具體分析：

• IOS：觸發(fā)了輸入框 blur 事件，仍然通過該辦法監(jiān)聽。

• Android：沒有觸發(fā)輸入框的 blur 事件。但通過第 1、2 部分我們可以知道，在 android 中，鍵盤的狀態(tài)切換(彈出、收起)不僅和輸入框關(guān)聯(lián)，同時還會影響到 webview 高度的變化，那我們不妨通過監(jiān)聽 webview height 的變化來判斷鍵盤是否收起。

下面舉例說明，其中頁面中含有一個輸入框：

class="txd">

? ?Welcome to TXD! ?

class="input">

? ? id="input" type="tel" />

ios & android 鍵盤彈出：

const $input = document.getElementById('input');

$input.addEventListener('focus', () => {

? ?// 處理鍵盤彈出后所需的頁面邏輯

}, false);

ios 鍵盤收起：

const $input = document.getElementById('input');

$input.addEventListener('blur', () => {

? ?// 處理鍵盤收起后所需的頁面邏輯

}, false);

android 鍵盤彈出與收起：

/*鍵盤彈起后頁面高度變小*/

const originHeight = document.documentElement.clientHeight || document.body.clientHeight;

window.addEventListener('resize', () => {

? ?const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;

? ?if (resizeHeight < originHeight) {

? ? ? ?// 鍵盤彈起所后所需的頁面邏輯

? ?} else {

? ? ? ?// 鍵盤彈起所后所需的頁面邏輯

? ?}

}, false);

在實踐中通過判斷 userAgent 來決定使用哪種方法：

const ua = window.navigator.userAgent.toLocaleLowerCase();

const isIOS = /iphone|ipad|ipod/.test(ua);

const isAndroid = /android/.test(ua);

04

—

使用場景

接下來根據(jù)上面的討論說明幾種常見場景：

(1)頭部及中間輸入框處于正常的文檔流，底部元素 fixed

ios 鍵盤遮擋在頁面上，頁面高度始終不變，頁面可以滾動，底部元素被遮擋；

android 頁面高度減少，頁面不可滾動，fixed 元素的 bottom 屬性的基線為鍵盤；

(2)頭部及輸入框處于正常文檔流，且所占可視區(qū)域變大，底部元素 fixed

ios 的 height 沒有發(fā)生變化，頁面可以滾動；

android 頁面高度變小，但為了使正常文檔流的元素可以正常顯示，頁面可以上下滾動，fixed 元素的 bottom 屬性的基線為鍵盤；

(3)頭部處于正常文檔流，輸入框脫離正常文檔流 fixed bottom 定位
(上面為了便于觀察，將輸入框包裹元素的背景設(shè)置了透明度)

ios 的 height 沒有發(fā)生變化，且始終保證輸入框處于可視區(qū)域中；

android 頁面高度變小，頁面不可滾動，fixed 輸入框 bottom 屬性的基線為鍵盤；

05

—

小結(jié)

在 ios 中，無論何種布局，為了使輸入框展示在可視區(qū)域中，鍵盤彈出時，頁面會向上滾動，該過程與 Element.scrollIntoViewIfNeeded() 方法(將不在瀏覽器窗口的可見區(qū)域內(nèi)的元素滾動到瀏覽器窗口的可見區(qū)域)產(chǎn)生的效果一致；且高度始終不變，頁面可滾動。

在 android 中，鍵盤喚起后，頁面可滾動與否由其處在正常文檔流中的元素決定：如果正常文檔流中的元素可全量展示，頁面不可滾動，否則頁面支持滾動；

在 android 中，鍵盤喚起后，fixed 元素的基準(zhǔn)會發(fā)生變化：根據(jù) bottom 定位的元素，其基線變?yōu)殒I盤上部；根據(jù) top 定位的元素，仍然根據(jù)頁面頂部，因此為照顧正常文檔流及 fixed 元素的用戶體驗，有的元素可根據(jù)頂部定位，有的可以根據(jù)底部定位。

在了解清楚 h5 中鍵盤的彈出收起的性質(zhì)后，在處理兼容性問題會容易很多。同時也可使用Element.scrollIntoViewIfNeeded() 方法輔助解決問題(比如在切換不同的輸入法時，可能導(dǎo)致有用信息被遮擋的情況)優(yōu)化體驗。

總結(jié)

以上是生活随笔為你收集整理的android 如何判断h5页面是否加载完成_H5 键盘兼容性小结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。