H5 键盘弹出把底部固定定位的元素挤上来

  • 这里的解决方法是安卓监听窗口高度,iOS监听文本块焦点,以实现隐藏与显示底部固定定位元素
// 以下为vue2的写法
// originHeight为窗口高度,当键盘弹出时,android手机会改变,监听变化控制下方固定按钮是否显示
// ios手机input框聚焦键盘弹出,键盘收起时,input框会失去焦点,因此给input框或者textarea框添加focus和blur事件,绑定searchFocus和searchBlur方法
data() {
  return {
    originHeight: 0,
    showTabbar: true
  }
}
mounted() {
  this.originHeight = document.documentElement.clientHeight || document.body.clientHeight
  window.addEventListener('resize', this.handleResize)
},
created() {
  this.initPage(this.unid)
},
destroyed() {
  window.removeEventListener('resize', this.handleResize)
},
methods: {
  // 判断ios
  isIos() {
    var m = navigator.userAgent
    var isIos = !!m.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    // eslint-disable-next-line no-unneeded-ternary
    const result = isIos ? true : false
    return result
  }, 
  // ios使用,监听输入框聚焦
  searchFocus() {
    if (this.isIos()) {
      this.showTabbar = false
      console.log(this.showTabbar, 'ios隐藏底部栏')
    }
  },
  // ios使用,监听输入框失去焦点
  searchBlur() {
    if (this.isIos()) {
      this.showTabbar = true
      console.log(this.showTabbar, 'ios显示底部栏')
    }
  },
  // 安卓使用,监听键盘弹出,即窗口大小改变
  handleResize() {
    var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
    if (resizeHeight < this.originHeight) {
      // 当软键盘弹起,在此处操作
      if (!this.isIos()) {
        this.showTabbar = false
        console.log(this.showTabbar, '安卓隐藏底部栏')
      }
    } else {
      // 当软键盘收起,在此处操作
      if (!this.isIos()) {
        this.showTabbar = true
        console.log(this.showTabbar, '安卓显示底部栏')
      }
    }
  },
posted @   jiazq  阅读(531)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
点击右上角即可分享
微信分享提示