H5混合開發軟鍵盤適配

2021-09-17 03:27:37 字數 935 閱讀 2039

h5混合開發軟鍵盤適配方案

​ 當前端介面的輸入框位於頁面底部,鍵盤喚醒時,就會遮擋輸入框。此時使用者在輸入時就不能看到已經輸入的內容,造成很不好的使用者體驗。

android**:

cordova.

getactivity()

.runonuithread

(new

runnable()

});

在這裡前端不需要做處理。本以為這個方案是最完美的。可是發現ios11.1和ios11.2不生效。這就很頭疼了。為了適配ios,不得不想新的解決思路。

​ 綜合考慮了android和ios的版本問題,這裡我們採用不同系統採用不同處理方式的方案。通過前端判斷裝置型別,在輸入框獲取焦點的時候,進行下一步處理。android採取以上的實現方式。ios就採取下面要說的這種方式。

​ 根據ios的特性,我們採取前端處理的方式來實現。當前端獲取到焦點時,將整個body向上推。型別於第一種方式,只不過是前端來處理。

前端**:

var scrolltime;

var timerid;if(

typeof

(device)

!="undefined"

&&device.platform==

'ios'

)else

document.body.scrolltop = document.body.scrollheight;},

100)

}

下面來講一下原理:

這裡需要注意的是,在失去焦點的時候,我們要清除這個定時器。再執行

document.body.scrolltop = document.body.scrollheight;
達到完美過度的效果。當然,想實現順滑的效果,還是用原生寫吧。

h5 移動端 監聽軟鍵盤彈起 收起

回車確認 btn on keypress function e document keyup function e 1.在ios中軟鍵盤彈起時,僅會引起 body scrolltop值改變,但是我們可以通過輸入框的獲取焦點情況來做判斷,但也只能在ios中採用這個方案,因為在android中存在主動收...

h5 移動端 監聽軟鍵盤彈起 收起

window.onresize事件來做突破點的,但是 ios 中軟鍵盤的彈起收起並不觸發 window.onresize 事件 總結 1 在 ios 中軟鍵盤彈起時,僅會引起 body scrolltop 值改變,但是我們可以通過輸入框的獲取焦點情況來做判斷,但也只能在 ios 中採用這個方案,因為...

h5 移動端 監聽軟鍵盤彈起 收起

前面一篇部落格 h5 安卓 鍵盤彈起介面適配 修改webview高度提到了在adnroid中如何監聽軟鍵盤的彈起與收起,是利用的視窗的高度發生變化 window.onresize事件來做突破點的,但是ios中軟鍵盤的彈起收起並不觸發window.onresize事件。總結 1.在ios中軟鍵盤彈起時...