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

发布于 2019-01-24 17:30:17 字数 964 浏览 2440 评论 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 技术交流群。

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

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。