移动端底部fixed定位input输入框被软键盘遮挡解决办法

移动端底部fixed定位input输入框被软键盘遮挡解决办法，方法有三种，具体使用可以看应用后问题是否被解决。

方式一：事件+失焦聚焦

// touchstart或focus事件
<input
   maxlength="100"
   @touchstart.native="handleClick"
   ref="input"
   type="textarea"
   v-model="reason"
   placeholder="请输入补充内容"
/>

handleClick(e) {
  e.preventDefault();
  this.$nextTick(() => {
    this.$refs.input.blur();
    this.$refs.input.focus();
  });
}

方式二：scrollIntoView

scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

mounted(){
  this.scrollIntoView()
},
methods: {
  //输入施工费用时，调整页面scroll高度
    scrollIntoView() {
      window.addEventListener("resize", () => {
        document.activeElement.scrollIntoView(true);
      });
    },
},
 unmounted() {
    window.removeEventListener("resize");
  }

方式三：滚动元素

//解决移动端苹果手机固定底部input框被遮挡问题
//这里加定时器的目的在于防止input框一获取到焦点之后，就执行了这个操作，导致这一操作没有很好的执行
//给input框绑定focus事件
onFocus(){
  setTimeout(() => {
    document.body.scrollTop = document.body.scrollHeight
  },300)
}

参考地址：

https://www.jianshu.com/p/bf24a192c549

https://www.jianshu.com/p/cf7d0d7dff44