关于IOS系统WEB移动端虚拟键盘遮挡input输入框问题的某种值得参考的解决方案

前言

最近一个项目卡在了输入框被ios输入法键盘遮盖的情况。

非常蛋疼的是，IOS系统没有很好的兼容方案，通过百度搜索，总结来说，就是当弹出键盘时，我的前端需要自行移动输入框的位置，使得不被遮盖。
我参考了不少文章，大家可以先看这篇文章关于IOS系统微信中键盘遮挡input的解决方案
推荐大家一个很好的IOS的WEB应用测试工具：MAC的XCode的Simulate

分析

IOS遇见这种蛋疼的问题，大家需要考虑两个问题：IOS的版本和设备的屏幕大小
我在调试了很多方案后，总结了一个奇葩值得参考的方案。
IOS输入法键盘弹出后，自动移动位置，这里需要通过前端input输入框focus监听状态，然后处理，不过移动位置还是不够好，会出现部分遮盖（ios版本导致）。
然后我就通过document.getElementById获取输入框的位置，得出位置变化，然后再上浮或者下浮的实时适配调整。

参考代码

vueJS的input输入框内代码

 <msginput class="textarea" ref="msginput" v-model="text" @input_focus="input_focus" @input_blur="input_blur"  v-focus="focusState"></msginput>

vueJS的input_focus处理函数

input_focus: function () {
  setTimeout(() => {
    var nowH = $("#chatfooter").offset().top;
    var u = navigator.userAgent;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isIOS) {
    //判断为ios
      if (nowH + 100 > window.innerHeight) {
      //判断是输入法框弹出成功
        let h = '0px';
        let chatfooterRect = document.getElementById("chatfooter").getBoundingClientRect()
        if(!this.msg_input_show ) {
          this.msg_input_show = chatfooterRect.bottom
        } else if (this.msg_input_show < chatfooterRect.bottom){
          h = chatfooterRect.bottom - this.msg_input_show
        } else {
          this.msg_input_show = chatfooterRect.bottom
        }
        $("#chatfooter").css("bottom", h)
      }
    }
  }, 500);
},

参考

关于IOS系统微信中键盘遮挡input的解决方案