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

背景

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被绑定多次，可以为其添加一个属性标明是否已经绑定用以区分。

scrollTop拓展

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

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

以上~