angular監聽移動端鍵盤的彈起和收回

2021-10-06 18:43:56 字數 659 閱讀 2078

頁面的提交按鈕採用的是固定定位在頁面的底部,鍵盤彈出後,提交按鈕緊挨著鍵盤的上方,

輸入框獲得焦點後,鍵盤彈出,並且輸入框回自動定位上方的空白處,

此時由於鍵盤上方固定定位的提交按鈕的原因有可能會遮擋住獲得焦點的輸入框,

從而導致使用者看不見輸入框,需要使用者手動滑動螢幕,移動輸入框的位置,才可以進行輸入內容。

解決辦法:

1.監聽window的大小的變化,來判斷鍵盤的彈出和收回

2.獲取輸入框底部的偏移位置,即輸入框底部距離可見區域上面的距離a==輸入框.offsettop-螢幕捲起的高度

3.獲得可見區間的高度b==window.height-提交按鈕的高度

4.將ab進行比較,調整螢幕滾動的距離,從而將輸入框定位到可見區域的位置,讓使用者可以輸入

ps:如果頁面當中有很多個輸入框,判斷什麼時候進行手動設定螢幕滾動的距離
window.height-提交按鈕的高度》輸入框底部距離可見區域上面的距離a>window.height+輸入框的高度     

當輸入框底部距離可見區域上面的距離a在這個範圍內 都需要手動操作螢幕捲起的高度 差值==輸入框底部距離可見區域上面的距離a-(window.height-提交按鈕的高度)

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

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

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 中採用這個方案,因為...