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中軟鍵盤彈起時...