美文网首页
解决IOS微信网页文本框输入文字后收起虚拟键盘页面出现空白

解决IOS微信网页文本框输入文字后收起虚拟键盘页面出现空白

作者: 小马嗒 | 来源:发表于2019-12-27 14:28 被阅读0次

做了一个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)
  })
}

相关文章

网友评论

      本文标题:解决IOS微信网页文本框输入文字后收起虚拟键盘页面出现空白

      本文链接:https://www.haomeiwen.com/subject/rjldoctx.html