移动端底部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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值