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

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

发布于 2019-01-24 字数 1150 浏览 2288 评论 0

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

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

当我们稍微滑动下页面就恢复了正常的情况,所以我们可以在文本失去焦点的时候,用 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/)){
}

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

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

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3