解决ios微信里键盘收起后页面无法回退的问题

354 阅读1分钟

背景

ios微信中打开H5页面输入完成后,键盘收起页面却没有回退,留下很大的空白,轻轻滑动又恢复正常。 事故现场

解决

此处以Vue项目为例。 要解决这个问题核心就是在元素失去焦点的时候,手动触发一个页面滚动事件。但对于这种特定版本才出现的bug,逐个去添加blur事件代价挺大的,于是想寻求一种write once, run anywhere的方法,这时候用mixin就很合适了。代码如下:

Vue.mixin({
  mounted() {
    this.iosInputBack()
  },
  methods: {
    iosInputBack() {
      let ua = navigator.userAgent
      if (/MicroMessenger/i.test(ua) && /(iPhone|iPad|iPod|iOS)/i.test(ua)) {
        let inputArr = document.querySelectorAll('input');
        inputArr.forEach(item => {
          if(!item.addMixinBlur) {
            item.addMixinBlur = true
            item.addEventListener('blur', () => {
              document.body.scrollTop = document.body.scrollTop;
            })
          }
        })
      }
    }
  }
})

思路就是在页面挂载完成后,找出页面内的input元素,为其绑定blur事件。但在过程中发现一个页面中mixin可能会被执行多次,因为每个自定义组件自身也会触发mixin,为了避免同一个input被绑定多次,可以为其添加一个属性标明是否已经绑定用以区分。 注:被v-if掉的input,由于没有遍历到所以错过了绑定监听事件,可以的话用v-show替换v-if。

scrollTop拓展

document.body.scrollTop是兼容微信浏览器的写法,其他情况用document.documentElement.scrollTop,所以平时要操作scrollTop时更好的写法为:

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
document.documentElement.scrollTop = document.body.scrollTop = scrollTop;

以上~