直播程序源碼H5 鍵盤兼容性小結

1.鍵盤彈出的不同表現
IOS：IOS 的鍵盤處在窗口的最上層，當鍵盤彈起時，webview 的高度 height 並沒有改變，只是 scrollTop 發生變化，頁面可以滾動。且頁面可以滾動的最大限度爲彈出的鍵盤的高度，而只有鍵盤彈出時頁面恰好也滾動到最底部時，scrollTop 的變化值爲鍵盤的高度，其他情況下則無法獲取。這就導致在 IOS 情況下難以獲取鍵盤的真實高度。
Android: webview 中留出空間，該空間小於等於的鍵盤空間，變化的高度差會隨着佈局而不同，有的認爲 鍵盤高度 + 頁面高度 = 原頁面高度； 是錯誤的誤導，只有在某種很巧合的佈局情況下才可套用此公式。

2.鍵盤收起的不同表現
IOS：觸發鍵盤上的按鈕收起鍵盤或者輸入框以外的頁面區域時，輸入框會失去焦點，因此會觸發輸入框的 blur 事件。
Android: 觸發鍵盤上的按鈕收起鍵盤時，輸入框並不會失去焦點，因此不會觸發頁面的 blur 事件；觸發輸入框以外的區域時，輸入框會失去焦點，觸發輸入框的 blur 事件。

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

鍵盤彈出：輸入框獲取焦點時會自動觸發鍵盤的彈起動作，因此，我們可以監聽輸入框的 focus 事件，在裏面實現鍵盤彈出後所需的頁面邏輯。這在 ios 及 android 中表現一致。
鍵盤收起：從第 2 部分可知，觸發鍵盤收起的不同形式會存在差異化表現，當觸發其他頁面區域收起鍵盤時，我們可以監聽輸入框的 blur 事件，在裏面實現鍵盤收起後所需的頁面邏輯。而在通過鍵盤按鈕收起鍵盤時在 ios 與 android 端存在差異化表現，下面具體分析：

IOS：觸發了輸入框 blur 事件，仍然通過該辦法監聽。
Android：沒有觸發輸入框的 blur 事件。但通過第 1、2 部分我們可以知道，在 android 中，鍵盤的狀態切換（彈出、收起）不僅和輸入框關聯，同時還會影響到 webview 高度的變化，那我們不妨通過監聽 webview height 的變化來判斷鍵盤是否收起。

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

<div class="txd"> 
	Welcome to TXD!  
</div>
<div class="input">
	<input id="input" type="tel" />
</div>
ios & and

roid 鍵盤彈出：

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);