ios輸入框的坑(軟鍵盤彈出不靈敏、輸入法影響彈出高度)

參考地址：

https://segmentfault.com/a/11...
https://blog.csdn.net/github_...

1.首先，是這樣的佈局：父容器裏面放一個輸入框 和一個按鈕

思路是：父容器fixed定位，bottom爲0，left爲-100%；flex佈局；在其餘事件觸發輸入框出現的時候（例如一個評論的icon），父容器 left值變爲0，被軟鍵盤頂上來。

<div class="ipt-box" :class="{iptfcs:showCipt}">    
     <input @blur="resetipt()" v-model="commenttxt"  ref="ctxt">
     <p @click="commentcircle()">發送</p>        
</div>


.ipt-box {
    position: fixed;
    left: -100%;
    bottom: 0;
    width: 100%;
    z-index: 9999999;
    display: flex;
    align-items: center;

    &.iptfcs {
        left: 0;
    }
}

好吧，結果是根本頂不上來！須要多加一層父容器！

2.其次，是這樣的佈局：父容器---父容器---輸入框+按鈕

<div class="ipt-box" :class="{iptfcs:showCipt}">
    <div class="ipt-box-cont">
         <input @blur="resetipt()" v-model="commenttxt"  ref="ctxt">
         <p @click="commentcircle()">發送</p>
    </div>
</div>


.ipt-box {
    position: fixed;
    left: -100%;
    bottom: 0;
    width: 100%;
    z-index: 9999999;

    &.iptfcs {
        left: 0;
    }

    .ipt-box-cont{
        width: 100%;
        display: flex;
        align-items: center;
    }
}

這樣作，終因而頂上來了。點擊評論icon，showCipt 設置爲true後，this.$refs.ctxt.focus() 聚焦準備書寫。可是ios出現點擊聚焦不靈敏的狀況！須要強制聚焦！

3.打開fastclick插件，將focus方法加入一行，強制聚焦：

FastClick.prototype.focus = function(targetElement) {
        var length;
        if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
            length = targetElement.value.length;
            targetElement.focus();  //新增這一行
            targetElement.setSelectionRange(length, length);
        } else {
            targetElement.focus();
        }
    };

這下點擊一次就能夠聚焦了，並且通過個人iphone7系統輸入法測試，沒有出現什麼問題，當我切換搜狗輸入法後，悲劇又發生了，遮擋一半！！換了xr測試,徹底遮擋！！！！

4.輸入法兼容問題有哪些

確實大部分 Android 瀏覽器是沒問題的，可是測試在 IOS 上，UC 瀏覽器配合原生輸入法和第三方輸入法（好比搜狗輸入法），輸入框都會被徹底擋住；QQ 瀏覽器或微信瀏覽器，配合第三方輸入法，輸入框會被遮住一半；百度瀏覽器配合第三方輸入法輸入框也會被徹底遮住。

5.軟鍵盤彈起，在安卓上是縮小了內容區域的高度， 軟鍵盤將下半部分進行遮擋；ios上則是整個webview總體上移，改變了整個內容區域的scrollTop值。

通過篩選，最終選擇使用定時器，思路以下：

點擊觸發input-------------在獲取焦點（軟鍵盤彈起）前，先將頁面的scrollTop值存起來-------
------獲取焦點------------判斷瀏覽器類型--------若是是ios，設置定時器，將此時內容的高度值賦值給瀏覽器當前滾動高度（確保徹底顯示）------
-----失去光標--------------判斷瀏覽器類型------若爲ios,清除定時器，並設置瀏覽器當前滾動高度值爲一開始鍵盤未彈起的scrollTop值

//解決第三方軟鍵盤喚起時底部input輸入框被遮擋問題
    var bfscrolltop = document.body.scrollTop;//獲取軟鍵盤喚起前瀏覽器滾動部分的高度
    $("input.inputframe").focus(function(){//在這裏‘input.inputframe’是個人底部輸入欄的輸入框，當它獲取焦點時觸發事件
        interval = setInterval(function(){//設置一個計時器，時間設置與軟鍵盤彈出所需時間相近
        document.body.scrollTop = document.body.scrollHeight;//獲取焦點後將瀏覽器內全部內容高度賦給瀏覽器滾動部分高度
        },100)
    }).blur(function(){//設定輸入框失去焦點時的事件
        clearInterval(interval);//清除計時器
        document.body.scrollTop = bfscrolltop;將軟鍵盤喚起前的瀏覽器滾動部分高度從新賦給改變後的高度
    });

應用在個人代碼裏面：

//點擊評論icon，觸發軟鍵盤彈起
    commentFocus(cid) {
        let _this = this;
        _this.scrollerval = document.body.scrollTop;
        _this.showCipt = true;
        _this.$refs.ctxt.focus();
        if (navigator.userAgent.indexOf('iPhone') > -1||navigator.userAgent.indexOf('iPad') > -1){
            _this.timer = setInterval(function () {
                document.body.scrollTop = document.body.scrollHeight;
            },1000);
        }
    },

//失去光標
    resetipt() {
        let _this = this;
        _this.showCipt = false;
        if (navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('iPad') > -1){
            clearInterval(_this.timer);
            document.body.scrollTop = _this.scrollerval;
        }
    },

固然，把瀏覽器類型存起來用更好啦！

而後，就能夠洗洗睡了！！！