起因

h5的輸入框引起鍵盤導致體驗不好，目前就算微信、知乎、百度等產品也沒有很好的技術方案實現，尤其底部固定位置的輸入框各種方案都用的前提下體驗也并沒有很好，這個問題也是老大難問題了。目前在準備一套與native協(xié)議 來解決這個問題，目前項目中的解決方案還是有值得借鑒的地方的，分享一下

下面話不多說了，來一起看看詳細的介紹吧

業(yè)務場景

固定在h5頁面底部的輸入框

無論是使用

<input />

還是

 <div contenteditable="true"> </div>

在聚焦事件觸發(fā)調起原生鍵盤時，在ios部分機型(iphone 4s iphone 5等)上會使得鍵盤彈起后遮擋住輸入框，使得用戶體驗不好。

目前的解決方案是寫一個定時任務，在判定是ios打開頁面時，執(zhí)行以下函數

let timer = setInterval(()=>{ // container 知道整個容器的dom節(jié)點 container.scrollIntoView({  block: 'start', behavior: 'auto' })},300); //300毫秒是經過多次試驗得到的數值，用戶體驗為佳

關于scrollIntoView

scrollIntoView這個API，官方的解釋是

The Element.scrollIntoView() method scrolls the element on which it's called into the visible area of the browser window.

語法

element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型參數 element.scrollIntoView(scrollIntoViewOptions); // Object型參數

參數

{ behavior: "auto" | "instant" | "smooth", block: "start" | "end",}

在can i use中查到的scrollIntoView的兼容性（主流瀏覽器中不考慮ie）

• Firefox 36 以上兼容
• chrome 61 以上兼容
• safiri 5.1開始 不兼容behavior中的smooth

后續(xù)問題

當然，這個解決方案智能解決部分機型的問題，要真正解決這個問題還是要依靠native端。

在ios 和 安卓機型的問題

因為設置了這個定時任務，就會有一個后續(xù)的問題出現，也是在落地項目中有遇到過的，在此說明一下。

在上拉或下拉到頭時，會出現背景白色的現象，因為有了這個定時器，它就會不斷將視圖拉回，導致頁面抖動。
如果在app層做了webview禁止拖動的話就不會有這個問題，當然不能完全依賴app，在程序中我們也需要做此方面的兼容優(yōu)化。

 <div class="container"   @touchStart="touchStart($event)"   @touchEnd="touchEnd($event)">  </div>

 touchStart(e) { this.clearTimer(); }, touchEnd(e) { this.repairIosInput(); }, clearTimer() {  if(this.timer) {   clearInterval(this.timer);   this.timer = null;  }else{   return;  } }, repairIosInput() {  if(this.timer) {   return;  }  this.timer = setInterval(()=>{   container.scrollIntoView({    block: 'start',   behavior: 'auto'   })  },300); }

在開始拉動頁面時清空定時器，停止拉動時開啟定時器，這樣就可以解決造成的抖動的問題了。

總結

做為一個老大難的問題，還會用更多的解決方案，請與我聯系，一起討論，早日脫坑！

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。