移動端底部fixed固定定位輸入框ios下不兼容

簡短記錄下最近開發移動端項目碰到的小坑，產品需求做一個售后對話頁面，底部固定輸入框，和微信對話差不多，但是在ios下，fixed失效，輸入框被虛擬鍵盤擋住，在安卓下是正常的。

      嘗試過網上說的很多方法，因為每個頁面的需求和布局可能不相同，比如我做的需要下拉刷新消息，上拉加載更多，用的是minit-UI來做，所以都沒有效果

后面無奈用了兩套代碼，用

var u = navigator.userAgent, app = navigator.appVersion;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端

判斷是安卓還是ios，安卓的繼續底部用固定定位，  ios底部也用固定定位，只是content內容主體部分用絕對定位

<div :class="isIOS?'input-bottom1':'input-bottom'">
  <form style="width:70%;">
    <input class="message-input" @focus="iosScrollT" @blur="iosScrollB" type="text" v-model="sendMess" >
  </form>
  <div class="footer-r" @click="postAdvisory">發送</div>
</div>
<div class="content" v-if="IOSis">
  <div :style="mHeight">
    <div class="service-list" v-for="(item,index) in infoList">
      <div class="service-item" v-if="item.is_admin==1">
        <i class="iconfont icon-kefuzixunhui"></i>
        <div class="border-left-empty"></div>
        <div class="message">{{item.content}}</div>
      </div>
      <div class="service-item1" v-else>
        <div class="message1">{{item.content}}</div>
        <div class="border-right-empty"></div>
        <img :src="userImg"/>
      </div>
    </div>
  </div>
  <div ref="msg_end" style="height:40px;"></div>
</div>

.input-bottom1{
  position: fixed;
  bottom: 60px;
  left: 0px;
  width: 100%;
  border-top: 1px solid #ccc;
  background-color: #fff;
  z-index: 9998 !important;

  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content:space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 10px 0;
  background-color:#f5f5f7;
  border-top:2px solid #dddddf;/*no*/
}

.content{
  position: absolute;
  top: 50px;
  left: 0px;
  right: 0px;
  bottom: 50px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
如此，虛擬鍵盤沒有擋住底部的輸入框了，但是輸入框聚焦光標的時候還是被擋住了一部分，所以又用了@focus="" @blur=""監聽輸入框光標，改變bottom值：position: fixed;bottom: 60px;，輸入框失焦又改成bottom: 0px;

還有用minit-UI來做下拉刷新消息，上拉加載更多不能兼容，所以ios端只能一次把消息加載完，然后進到頁面時，頁面自動滑動到最底部，從而可以查看到最新消息，所以就用了.scrollIntoView()

that.$refs.msg_end.scrollIntoView();
但是還有一個問題，點擊底部自定義的發送按鈕沒有用，硬要點完成，把虛擬鍵盤放下去后，再點發送按鈕才能把消息發送出去，所以只能監聽輸入框光標離開或虛擬鍵盤的動作

document.body.addEventListener('focusout', () => {
  //軟鍵盤收起的事件處理
  
})

$("#keyword").on('keypress', function(e) { //#keyword為input文本框
var keycode = e.keyCode;
var searchName = $(this).val();
if(keycode == '13') {//13為回車鍵
       //觸發事件

});

監聽上面事件就發送消息，通過上面的處理親測效果還不錯，輸入框能緊貼

另外這博客寫的挺好的，可以參考https://blog.csdn.net/hahahhahahahha123456/article/details/82587621