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

2021-09-25 05:20:36 字數 1178 閱讀 2059

回車確認

$

(".btn").

on("keypress"

,function

(e)});

// $(document).keyup(function(e)

// });

1.在ios中軟鍵盤彈起時,僅會引起$(『body』).scrolltop值改變,但是我們可以通過輸入框的獲取焦點情況來做判斷,但也只能在ios中採用這個方案,因為在android中存在主動收起鍵盤後,但輸入框並沒有失焦,而ios中鍵盤收起後就會失焦;

2.在android中軟鍵盤彈起或收起時,會改變window的高度,因此監聽window的onresize事件;

//獲取原視窗的高度

//android

//var originalheight=$(window).height() ||$(document.body).height();

var originalheight=document.documentelement.clientheight ||document.body.clientheight;

window.

onresize

=function()

else

}//ios:focusin和focusout支援冒泡,對應focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡,focus和blur不會冒泡,這樣就可以使用事件**,處理多個輸入框存在的情況。

document.body.

addeventlistener

('focusin',(

)=>})

document.body.

addeventlistener

('focusout',(

)=>

})

頁面顯示高度

var screenheight;

if(window.innerheight)

elseif(

(document.body)

&&(document.body.clientheight))$

("html,body").

height

(screenheight)

;

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

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

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

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

js 移動端之監聽軟鍵盤彈出收起

js 移動端關於頁面布局,如果底部有position fixed的盒子,又有input,當軟鍵盤彈出收起都會影響頁面布局。這時候android可以監聽resize事件,如下,而ios沒有相關事件。解決安卓鍵盤彈出問題 var oheight document height window resize...