背景：工作需要，一個手機頁面(vue項目)底部需要一個輸入框，并且能夠多行輸入（這個這里就不多說了，搜一下就能找到方法）。
實現(xiàn)過程：首先使用的就是fixed方法將輸入框部分固定到了頁面底部，這個方法在安卓沒有問題，ios的自帶輸入法也沒問題，但是當ios使用第三方輸入（比如搜狗）時，被推上去的輸入框會被擋住一半（當時是一個iphone7）
解決過程：遇到問題后就在網(wǎng)上搜索解決辦法，最先找到的就是滾動（大致意思就是使用window.scrollTo()方法滾動可以參考:h5實現(xiàn)輸入框fixed定位在屏幕最底部兼容性。
- 第一種（滾動）：試了之后發(fā)現(xiàn)好像iphone7 ios12的系統(tǒng)沒有問題了，但是ios11的系統(tǒng)還是被擋住了一半（哎，因為開發(fā)的有點著急，問題出現(xiàn)的情況沒有做好記錄，這里就是大概的回憶問題了）
- 第二種（比較鍵盤彈起后的頁面高度（window.innerHeight）與輸入框底部距頁面頂部的高度（Element.getBoundingClientRect()方法返回元素的大小及其相對于視口的位置））：這個方法在iphone X顯示正常，在7顯示的innerHeight始終是頁面的整體高度而不是減去鍵盤的高度，所以這個方法也不行了
- 第三種：想到了之前解決類似問題是一個方法（document.activeElement.scrollIntoView()）,這個方法是可以傳參數(shù)的，默認的是將當前元素滾動到可視居中的位置，如果傳false則是滾動到底部。試了一下，ios頁面顯示效果為不會被推上去，so，放棄
- 第四種：網(wǎng)上很多說ios不支持fixed，回變成absolute啥的，嘗試了一下flex布局，結(jié)果也是不行（忘了哪種機型出問題）
- 第五種：flex不行就試試absolute，結(jié)果ios沒問題（7,v:11不行），安卓顯示不能推起來
最終使用方案： 因為提到了是多行輸入框，使用的是textarea，在ios中，輸入多行時，光標位置出現(xiàn)問題，且使用ios的長按選擇光標位置時，光標直接自動下移然后頁面掉下。最終選擇了使用absolute方案，在機型是安卓時使用scrollIntoView(fasle)，因為發(fā)現(xiàn)，鍵盤會遮擋部分（安卓機型都有），所以同時改變輸入框距底部的高度?！敬朔椒ㄈ晕唇鉀Qiphone 7，或者ios中搜狗輸入法遮擋問題】
部分代碼
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('resize', function () {
var ua = navigator.userAgent.toLowerCase();
if (/android/.test(ua)){
var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (clientHeight > nowClientHeight) {
//鍵盤彈出的事件處理
if(document.activeElement.tagName === 'TEXTAREA' || document.activeElement.tagName === 'INPUT'){
document.activeElement.scrollIntoView(false)
_this.dogInput = true; // 增加高度的處理
}
}else {
//鍵盤收起的事件處理
_this.dogInput = false;
}
}
～～～若有建議，敬請指教。
