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

標籤：PQ   use   letter   ios裝置   時間   ati   aaaaa   ini   files   

軟鍵盤收放事件

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

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

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

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

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

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

點擊輸入框後的處理：

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

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

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

軟鍵盤問題後續加入~~

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