1. 程式人生 > >【移動端web】軟鍵盤兼容問題

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

box 因此 focus AR 相關 點擊 ~~ 事件監聽 aaa

軟鍵盤收放事件


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

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


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


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


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


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


點擊輸入框後的處理:

技術分享圖片


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

技術分享圖片


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

技術分享圖片

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


軟鍵盤問題後續加入~~


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