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

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

• IOS：IOS 的鍵盤處在窗口的最上層，當(dāng)鍵盤彈起時(shí)，webview 的高度 height 并沒有改變，只是 scrollTop 發(fā)生變化，頁面可以滾動(dòng)。且頁面可以滾動(dòng)的最大限度為彈出的鍵盤的高度，而只有鍵盤彈出時(shí)頁面恰好也滾動(dòng)到最底部時(shí)，scrollTop 的變化值為鍵盤的高度，其他情況下則無法獲取。這就導(dǎo)致在 IOS 情況下難以獲取鍵盤的真實(shí)高度。
• Android: webview 中留出空間，該空間小于等于的鍵盤空間，變化的高度差會(huì)隨著布局而不同，有的認(rèn)為 鍵盤高度 + 頁面高度 = 原頁面高度； 是錯(cuò)誤的誤導(dǎo)，只有在某種很巧合的布局情況下才可套用此公式。

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

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

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

• 鍵盤彈出：輸入框獲取焦點(diǎn)時(shí)會(huì)自動(dòng)觸發(fā)鍵盤的彈起動(dòng)作，因此，我們可以監(jiān)聽輸入框的 focus 事件，在里面實(shí)現(xiàn)鍵盤彈出后所需的頁面邏輯。這在 ios 及 android 中表現(xiàn)一致。
• 鍵盤收起：從第 2 部分可知，觸發(fā)鍵盤收起的不同形式會(huì)存在差異化表現(xiàn)，當(dāng)觸發(fā)其他頁面區(qū)域收起鍵盤時(shí)，我們可以監(jiān)聽輸入框的 blur 事件，在里面實(shí)現(xiàn)鍵盤收起后所需的頁面邏輯。而在通過鍵盤按鈕收起鍵盤時(shí)在 ios 與 android 端存在差異化表現(xiàn)，下面具體分析：
• IOS：觸發(fā)了輸入框 blur 事件，仍然通過該辦法監(jiān)聽。
• Android：沒有觸發(fā)輸入框的 blur 事件。但通過第 1、2 部分我們可以知道，在 android 中，鍵盤的狀態(tài)切換（彈出、收起）不僅和輸入框關(guān)聯(lián)，同時(shí)還會(huì)影響到 webview 高度的變化，那我們不妨通過監(jiān)聽 webview height 的變化來判斷鍵盤是否收起。

下面舉例說明，其中頁面中含有一個(gè)輸入框：
<div class="txd"> Welcome to TXD! </div> <div class="input"> <input id="input" type="tel" /> </div>
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);
在實(shí)踐中通過判斷 userAgent 來決定使用哪種方法：
const ua = window.navigator.userAgent.toLocaleLowerCase(); const isIOS = /iphone|ipad|ipod/.test(ua); const isAndroid = /android/.test(ua);
4. 使用案例
接下來根據(jù)上面的討論說明幾種常見場景：
（1）頭部及中間輸入框處于正常的文檔流，底部元素 fixed

ios 鍵盤遮擋在頁面上，頁面高度始終不變，頁面可以滾動(dòng)，底部元素被遮擋；
android 頁面高度減少，頁面不可滾動(dòng)，fixed 元素的 bottom 屬性的基線為鍵盤；
（2）頭部及輸入框處于正常文檔流，且所占可視區(qū)域變大，底部元素 fixed

ios 的 height 沒有發(fā)生變化，頁面可以滾動(dòng)；
android 頁面高度變小，但為了使正常文檔流的元素可以正常顯示，頁面可以上下滾動(dòng)，fixed 元素的 bottom 屬性的基線為鍵盤；
（3）頭部處于正常文檔流，輸入框脫離正常文檔流 fixed bottom 定位

（上面為了便于觀察，將輸入框包裹元素的背景設(shè)置了透明度）
ios 的 height 沒有發(fā)生變化，且始終保證輸入框處于可視區(qū)域中；
android 頁面高度變小，頁面不可滾動(dòng)，fixed 輸入框 bottom 屬性的基線為鍵盤；
5. 小結(jié)

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

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

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

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

總結(jié)

以上是生活随笔為你收集整理的android accessibility 模拟键盘事件_H5 键盘兼容性小结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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