h5 ios輸入框與鍵盤 兼容性優化

原由

h5的輸入框引發鍵盤致使體驗很差，目前就算微信、知乎、百度等產品也沒有很好的技術方案實現，尤爲底部固定位置的輸入框各類方案都用的前提下體驗也並無很好，這個問題也是老大難問題了。目前在準備一套與native協議 來解決這個問題，目前項目中的解決方案仍是有值得借鑑的地方的，分享一下

業務場景

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

不管是使用

<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型參數
複製代碼

參數

參數	說明	類型	可選值	默認值
alignToTop	--	boolean	---	false
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);
 }
複製代碼

在開始拉動頁面時清空定時器，中止拉動時開啓定時器，這樣就能夠解決形成的抖動的問題了。

總結

作爲一個老大難的問題，還會用更多的解決方案，請與我聯繫，一塊兒討論，早日脫坑！