h5底部輸入框在ios被軟鍵盤頂飛的問題

好吧,其實不是頂飛,準確點說應該是h5頁面fiexed定位在底部的輸入框在ios軟鍵盤彈起的時候軟鍵盤跟輸入框有時會有一段懸空的距離,無法緊貼。在安卓機子上則沒有這樣的情況。
解決方法是通過h5的scrollIntoView去實現。scrollIntoView()可以在所有的HTML元素上調用,在滾動瀏覽器窗口,或者窗口發生變化時,可以調用該方法讓元素出現在視窗中。(本文的例子就是軟鍵盤的彈出改變了窗口的高度)
該方法不傳參數或者傳入true可以讓元素與視窗頂部齊平,如果傳入false調用元素會盡可能全部出現在視口中,(可能的話,調用元素的底部會與視口頂部平齊。)

具體代碼如下,用一個全局的定時器變量改變input框的狀態,在input框點擊或聚焦時觸發該定時器,失焦則清除定時器(這里用vue事件作為例子)
template模板

<input @click="viewAll" @blur="viewDefault"  ref="replyInput" type="text"  />

javascript模塊

var inputTimer = null;

viewAll: function(){
    this.inputTimer = setInterval( () => {
        this.$refs.replyInput.scrollIntoView(false);
    },100);
},
viewDefault: function(){
    clearInterval(this.inputTimer);
}

這個問題解決完呢,通常輸入框彈起的時候我們會給背景加個遮罩層,同時也不想背景滑動,這時候單單給body添加overflow hidden是不夠的,主要是ios的機子上無法兼容,so這時候最好還是給蒙板跟你的輸入框區域加上個touchmove事件,來去掉touchmove的默認事件。如
template模板 遮罩層

<div  @touchmove="stopMove($event)" class="view-mask">  
</div>

javascript模塊

stopMove: function(e){
    e.preventDefault();
}

附上最近發現的另一個解決方案 http://efe.baidu.com/blog/mobile-fixed-layout/

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,446評論 25 708
  • 1.之前做微信公眾號時發現每次調用鍵盤輸入的時候輸入框就被蓋著,讓人有點煩,于是研究了一番,有了點下面的收獲,解決...
    倘浩洋閱讀 9,700評論 0 3
  • 搖滾僅僅是一種音樂形態嗎? 不! 搖滾是一種精神,搖滾是一種文化,搖滾是一種思想的顛覆形式,搖滾是一種人生態度和哲...
    音曼實驗室閱讀 278評論 0 0
  • 隨意斜披著校服的少年一如既往地走在回家的路上,蓬亂頭發下耷著的斜劉海卻遮不住他眼睛里的煩躁,急促而又不走直線的腳步...
    Sheldon黃閱讀 338評論 0 1
  • 劉溪,遠大住工國際;國學踐行23期學員,24期奉獻者,六項精進299期同修【知~學習》 【日精進第2天】 《六項精...
    西西_3e45閱讀 245評論 0 1