微信 6.7.4 更新以后导致 Input 文本框失去焦点,IOS 软键盘缩回去页面没有缩回去

发布于 2019-01-24 字数 1148 浏览 1028 评论 0

据测试返回的信息,这个问题只有 IOS 有,安卓端并没有这个 Bug,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,下面会有一片白色的空白区域。

当我们稍微滑动下页面就恢复了正常的情况,所以我们可以在文本失去焦点的时候,用 JavaScript 去滑动下页面,问题就解决了,但是页面可能会闪一下:

$("input,select").blur(function(){
  setTimeout(() => {
  const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
  window.scrollTo(0, Math.max(scrollHeight - 1, 0));
  }, 100);
})

更近一步,我们可以判断用户是 IOS 还是安卓,是在微信里面还是普通的浏览器里面:

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

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!