兼容ios和android的帶有輸入框的底部懸浮按鈕

需求:

頁面底部有個fixed的button,和一個處於正常文檔流中的輸入框,當嘗試往輸入框輸入內容時,會喚起手機鍵盤。需求是喚起鍵盤的時候,fixed的按鈕不希望被鍵盤頂上去,即不希望按鈕在鍵盤上部,而是希望按鈕仍舊在底部,被鍵盤蓋住。

現象:

ios:按鈕有時候會被鍵盤頂上去,有時候不會。

安卓:一定會被鍵盤頂上去

解決方法:

android:產生此現象的原因是:頁面的窗口發生了變化,即窗口變爲除了鍵盤的部分,由於fixed定位相對於窗口最底部,所以會,出現了此現象。解決方法是:監聽窗口的resize事件。當窗口高度變小時,將button的fixed定位變爲static定位。當窗口恢復時,將button的static定位變爲fixed定位。有一點需要注意的是,Android裏的輸入框在鍵盤收起時不會觸發blur事件,所以,想要通過focus、blur事件是無法解決問題的。

ios:產生原因不詳,解決方法:監聽輸入框的focus和blur事件,當focus時,鍵盤出現,將button的fixed定位變爲static定位,當blur時,鍵盤收起,將button的static定位變爲fixed定位。有一點需要注意的是,ios裏的窗口在鍵盤彈出或者收起不會觸發resize事件。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章