IOS下 input 被軟鍵盤方案遮蓋問題解決

標籤：https   www   document   blank   使用   and   methods   scrollto   收穫   

前言：

　並沒有完美解決 ！

情境：

　最近在做企業H5的一個項目，裡面有個動態列表頁，開始輸入框是隱藏的，點擊評論才會出現並讓 input 聚焦。經過測試在安卓上面應該沒什麼問題，但是iOS上面會出現 input 被軟鍵盤遮蓋或者半遮蓋、甚至發送按鈕不能點擊的狀況。

　總的來說問題有點小嚴重。

查閱百度：

　好的，百度一搜，哇！解決方案很多，我就放心的去抽了一根煙，想著分分鐘完事。BUT 經過實驗 百度 “ios 下input 被軟鍵盤遮蓋” 前兩頁沒有一個能解決我的問題的！！！

　不過收穫還是有的... 參考文章如下（寫了三個比較可以的吧）

　66471962

　https://juejin.im/post/5b0401b2f265da0b71569ca0

　https://www.cnblogs.com/wx1993/p/6059668.html

 

解決（Vue）：

　因為 iOS 下軟鍵盤彈出並不會改變視窗高度所以也就沒試監聽 window 的 resize 事件。

 

　第（n-2）次是在輸入框擷取焦點的時候：

// 輸入框獲得焦點    onFocus(){      var that = this;      setTimeout(function(){        that.sendText.scrollIntoView(true);        that.sendText.scrollIntoViewIfNeeded();      },100);    },

　scrollIntoView(true)：滾動瀏覽器視窗或容器元素，以便在當前視窗的可見範圍看見當前元素。

　有效果，但是還是會有問題，偶爾還是會出現半遮蓋的情況 iPhone6 尤為明顯。

 

　第（n-1）次 是使用的滾動到底部的方法，因為項目的動態列表是有分頁的，所以適當的改了一下。

created(){    var u = navigator.userAgent;    this.isAndroid =u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //Android終端    this.isIOS =!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //IOS終端  },methods:{    // 輸入框獲得焦點    onFocus(){      var that = this;      this.bfscrolltop = document.body.scrollTop; // 記錄當前位置      if(this.isIOS){        setTimeout(function(){          document.body.scrollTop = document.body.scrollTop*1 + 200;        },300)      }    },},

　在點擊發送的時候設定： document.body.scrollTop = this.bfscrolltop; 

問題：

　1、在監聽失去焦點的時候設定 document.body.scrollTop = this.bfscrolltop 是點不了發送的 （這就觸及到我知識的盲區了）

　2、ios 不管型號（可能除了SE）第一次點擊評論還是可能會出現半遮蓋，或者全遮蓋的情況。

 

　第n次 是在點擊評論的時候 加了一個定時器（我不知道為什麼這樣寫就好了！）

created(){    var u = navigator.userAgent;    this.isAndroid =u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //Android終端    this.isIOS =!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //IOS終端  },methods:{    // 點擊評論    commentClick(index){      var that = this;      if(this.isIOS){        setTimeout(function(){          document.body.scrollTop = document.body.scrollTop*1 + 300;        },300)      }      that.$refs.import_inp.focus();    },    // 輸入框獲得焦點    onFocus(){      var that = this;      this.bfscrolltop = document.body.scrollTop; // 記錄當前位置      if(this.isIOS){        setTimeout(function(){          document.body.scrollTop = document.body.scrollTop*1 + 200;        },300)      }    },    // 輸入框失去焦點    changeBlur(){      var that = this;      // input 輸入框 內無內容的情況下點擊ios軟鍵盤的完成是可以回去的      if(this.inputVal == ""){        document.body.scrollTop = this.bfscrolltop;      }    },    // 點擊發送    sendComment(){        document.body.scrollTop = this.bfscrolltop;    },},

　註：以上代碼只是關於input輸入框被遮蓋的。

　目前在 iPhone7 iPhone6 iPhoneSE 上沒什麼問題

問題：

　1、當輸入框內有內容的時候，關掉軟鍵盤是不能返回記錄的位置的

 

總結：

　目前只能解決到這個地步了。黔驢技窮。

　有什麼好的解決方案還望看到的朋友指點一二。

　根據自己的項目問題選擇一個儘可能最好的方法解決

 

IOS下 input 被軟鍵盤方案遮蓋問題解決