【移動端web】軟鍵盤兼容問題

軟鍵盤收放事件

這周幾天遇到了好幾個關於web移動端兼容性的問題。並花了很長時間去研究如何處理這幾種兼容問題。

這次我們來說說關於移動端軟鍵盤的js處理吧。

一般情況下，前端是無法監控軟鍵盤到底是彈出來還是關閉的。能使用的一般是輸入框獲取焦點事件（focus）與輸入框失去焦點事件（blur）。

ios設備下，點擊輸入框，輸入框獲取了焦點，便會彈出軟鍵盤；軟鍵盤關閉后，輸入框也能失去焦點。這點在ios下是沒什么問題的。也可通過此方法來處理鍵盤相關問題。

但在安卓設備下，點擊輸入框，輸入框獲取了焦點，彈出軟鍵盤沒問題，但是我們關閉軟件盤時，其實輸入框的焦點並不會失去。因此，此方法不適合安卓。因此要使用resize。

一句話：ios使用focus、blur處理全部軟鍵盤事件，安卓部分可處理，但可加上window的resize事件監聽軟鍵盤的打開與關閉。

點擊輸入框后的處理：

點擊其他節點或ios關閉軟鍵盤的處理：

安卓下，這樣就能判斷軟鍵盤的收放狀態了。

而ios軟鍵盤收放不會觸發resize方法，說明，ios軟鍵盤彈出不會改變頁面的高度，安卓可以。因此能解決。

軟鍵盤問題后續加入~~