移動端表單提交-input focus時鍵盤和定位元素（按鈕）遮擋問題

時間 2020-08-11

標籤移動表單提交 input focus 鍵盤定位元素按鈕遮擋問題欄目無線简体版

原文原文鏈接

要實現這樣一個提交用戶輸入信息的頁面，在ios中，能夠很完美的將視窗上移，可是每次在安卓手機底部定位的按鈕老是會在鍵盤彈出後，從新定位在鍵盤上方；這裏本身在寫代碼時，以爲這個解決方案還算能夠，記錄下：html

<body>
　　<div class="page-index">
　　　　<div class="m-input">
　　　　　　<input class="js-input"></div>
　　　　</div>
　　　　<div class="btn"></div>
　　</div>
</body>android

html, body{
height: 100%;
}
.page-index {
height: 100%;
.btn {
position: absolute;
left: 0;
bottom: xxxpx;
}
}
$('.js-input').on('tap focus', function(){
　　if(test()) {//安卓
　　　　$('body').height($(window).height());
　　}
})
$('.js-input').on('blur', function(){
　　if(test()) {//安卓
　　　　setTimeout(function() {
　　　　　　$('body').height(_this.bodyHeight);
　　　　});
　　}
})ios

//檢測安卓或ios
function test() {
　　var ua = navigator.userAgent.toLowerCase();
　　if (/iphone/.test(ua)) {
　　　　return false;
　　} else if (/android/.test(ua)) {
　　　　return true;
　　}
}iphone