h5中ios輸入框和鍵盤兼容性優化的示例分析

這篇文章給大家分享的是有關h5中ios輸入框和鍵盤兼容性優化的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

業務場景

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

無論是使用

<input />

還是

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

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

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

let timer = setInterval(()=>{
 // container 知道整個容器的dom節點
 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

后續問題

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

在ios 和 安卓機型的問題

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

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

 <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);
 }

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

感謝各位的閱讀！關于“h5中ios輸入框和鍵盤兼容性優化的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！