来欢迎使用CSDN-markdown编辑器

hack ios12.1 wechat6.7.4 软键盘顶起页面后收起键盘页面不回弹

当你看到这里，你一定发现了在ios12+，微信6.7.4版本上
H5软键盘弹起后会把页面顶起(这是正常现象)；
但是当你收起键盘，被顶起的部分不会回弹，造成页面底部留有一块空白。。

** 这还不是最恶心的 **
如果底部使用了fixed布局，(比如一个弹层，弹层中的输入框出发了键盘收起)，那就不光是丑了，按钮还不可以点击，因为发生了变化，他停留在了fixed订到的哪个位置了

这个时候，我们将屏幕做一个滚动，问题即可消失
所以就考虑用代码滚动一下屏幕hack这个问题

撸它：用vue做个?

data() {
  return {
    scrollTop: 0  // 用来记录滚动位置
  }
},
mounted() {
  window.addEventListener('scroll', this.scrollFn);  // 监听scroll
  // hack ios12 wechat 6.7.4 软键盘顶起页面后收起键盘页面不回弹
  document.body.addEventListener('focusout', () => {   // 解决问题就在这里，键盘收起的事件中主动做一下scrollTo
    window.scrollTo(0, this.scrollTop - 1);
    window.scrollTo(0, this.scrollTop);
  });
},
destroyed() {
  window.removeEventListener('scroll', this.scrollFn);  // 销毁监听
},
methods: {
  getScrollTop() {
    return document.documentElement.scrollTop || document.body.scrollTop;
  },
  scrollFn() {
    this.scrollTop = this.getScrollTop();
  }
}

如果不影响所有机型，只想在bug版本做一下hack，就可以先判断下版本再处理

const wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
const wechatVersion = wechatInfo[1] 
const u = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (wechatVersion=='6.7.4'&&!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
  // do hack
}

附上ios、android监听键盘状态的方法

ios

document.body.addEventListener('focusin', () => {  //软键盘弹起事件
  console.log("键盘弹起")  
})

document.body.addEventListener('focusout', () => { //软键盘关闭事件
  console.log("键盘收起")  
})

android
请先判断android环境，ios不支持resize监听

const winHeight = document.documentElement.clientHeight // 原始高度
window.addEventListener('resize', () => {
  const nowHeight = document.documentElement.clientHeight
  if (winHeight - nowHeight > 50) {
    //当软键盘弹出，在这里面操作
  } else {
    //当软键盘收起，在此处操作
  }
})