做了一个h5页面,用户输入反馈内容后,点击提交,弹出反馈成功弹框,在安卓,ios非微信上面可以关闭弹窗,在ios微信里面无法关闭。
h5页面的input
select
textarea
页面调用软键盘收起后,由于软键盘被顶起关闭后不会往下移,导致页面下面出现一大块空白。
网上查了资料说:微信6.7.4版本会出现这个问题,微信6.7.3不会出现这个问题
但是我用朋友和自己的手机测试之后,发现苹果6及以下的微信是没有这个问题出现的,7及以上会有这个问题,我们的微信版本都是7.02。
解决办法:
监听input
select
textarea
等失去焦点后,让页面的scrollTop
为0
export const judgeDeviceType = () => {
var ua = window.navigator.userAgent.toLocaleLowerCase()
const isIOS = /(iPhone|iPad|iPod|iOS)/i.test(ua)
var isAndroid = /android/.test(ua)
return {
isIOS: isIOS,
isAndroid: isAndroid
}
}
const isIOS = judgeDeviceType().isIOS
const isWechat = window.navigator.userAgent.match(/MicroMessenger/i)
if (isIOS && isWechat) {
document.getElementById('feed-txt').addEventListener('blur', () => {
setTimeout(() => {
window.scrollTo(0, 0)
}, 100)
})
}
网友评论