当你看到这里你一定发现了在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 {
//当软键盘收起，在此处操作
}
})
