起因

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

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

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

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

無論是使用

<input />

還是

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

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

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

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

關(guān)于scrollIntoView

scrollIntoView這個(gè)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)然，這個(gè)解決方案智能解決部分機(jī)型的問題，要真正解決這個(gè)問題還是要依靠native端。

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

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

在上拉或下拉到頭時(shí)，會(huì)出現(xiàn)背景白色的現(xiàn)象，因?yàn)橛辛诉@個(gè)定時(shí)器，它就會(huì)不斷將視圖拉回，導(dǎo)致頁面抖動(dòng)。
如果在app層做了webview禁止拖動(dòng)的話就不會(huì)有這個(gè)問題，當(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);
 }

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

總結(jié)

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

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

最新評(píng)論