起因

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

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

業(yè)務(wù)場景

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

無論是使用

<input />

還是

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

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

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

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

關(guān)于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型參數(shù) 
element.scrollIntoView(scrollIntoViewOptions); // Object型參數(shù)

參數(shù)

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

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

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

后續(xù)問題

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

在ios 和 安卓機(jī)型的問題

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

在上拉或下拉到頭時，會出現(xiàn)背景白色的現(xiàn)象，因為有了這個定時器，它就會不斷將視圖拉回，導(dǎo)致頁面抖動。
如果在app層做了webview禁止拖動的話就不會有這個問題，當(dāng)然不能完全依賴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);
 }

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

總結(jié)

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

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論