软键盘顶起底部dom节点;自动获取焦点;失去焦点收起键盘;

@Android软键盘弹起,tabbar不能吸底,被顶起问题。
@vue中input属性autofocus属性失效,不能自动获取焦点问题。
@滑动页面,收起键盘问题解决。

##问题一:通过Android属性解决问题。监听页面高度,控制底部tabbar显示隐藏。

// 监听屏幕高度
    getHeight() {
      // android通过监听窗口尺寸去设置吸底问题
      let H = window.innerHeight;
      alert(H)
      window.addEventListener('resize', () => {
        if (window.innerHeight < H) {
          this.showTabbar = false
        } else {
          this.showTabbar = true
        }
      });
    },

##问题二:通过focus()方法解决,在dom节点创建之后去获取设置。
this.$nextTick()异步执行代码,等待元素节点完全创建之后执行。

// 进入界面获取焦点 并且缓存
    getFocus() {
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },

##问题三: 通过全局window对象去监听触摸事件,收起键盘。

//监听事件
window.addEventListener('touchmove',this.myTouchMove,true);
//method方法
// 收起键盘
    myTouchMove() {
      this.$refs.input.blur()
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值