移動端軟件盤遮擋輸入框問題
阿新 • • 發佈:2017-11-22
監聽事件 如果 第三方 代碼 element string function 滾動scroll read (false);
第一、首先解決軟鍵盤影響布局的問題:
軟鍵盤彈出會改變瀏覽器可視區域的高度,安卓會觸發window.resize事件,ios不會觸發,所以如果頁面元素的布局是以窗口大小為基準的話,會出現布局混亂;比如body的height:100%等等,
所以需要在頁面初始化完成後執行這段代碼(固定body的高度,不讓他自適應)
$(document).ready(
function
() {
$(
‘body‘
).height($(
‘body‘
)[0].clientHeight);
});
第二、區分輸入框被遮擋的類型
輸入框的高度目測最高是頁面可視區域的一半,即1/2手機屏幕寬度,所以如果所有輸入框都在頁面上半部分,就不存在軟鍵盤遮擋輸入框的問題
(1)、輸入框在頁面的底部且第一個輸入框在頁面下半部分
輸入框組用絕對定位定位到頁面底部。當軟鍵盤彈出時也就自動把所有的輸入框彈上去
(2)、輸入框組的總高度大於1/2頁面高度
給每個輸入框做focuse監聽事件或者直接監聽window.resize事件(如果使用的是第三方輸入法的話,需要把下面的代碼放到時間函數內部)
document.activeElement.scrollIntoViewdocument.activeElement.scrollIntoViewIfNeeded();
或者
function scrollT(){
$("html,body").animate({scrollTop: $(".fI_now").offset().top}, 300);
}
參考網址:
深入理解滾動scroll:https://www.cnblogs.com/xiaohuochai/p/5831640.html
移動端軟件盤遮擋輸入框問題