摘要：描述打开系统的微信页面，当点击输入弹出输入法的时候，页面如果上移了，那输入法收起的时候页面无法自动回到底部，会留有空白，导致下次点击弹起的失效。判断是否为微信失去焦点事件亦可本文首发于个人博客完
1. BUG描述
打开 iOS 12 系统的微信 H5 页面，当点击 input 输入弹出输入法的时候，页面如果上移了，那输入法收起的时候页面无法自动回到底部，会留有空白，导致下次点击弹起的失效。
上面三张图中，第一张是未点击的状态，第二张是点击最后一个输入框弹出输入法的状态，第三张是收起输入法的状态，可以发现在第三张图中底部出现空白，页面没有下移返回底部。
2. 解决方法可以通过重置元素滚动位置，触发回流（Reflow），从而消除底部空白。
// 判断是否为 iOS 微信
isIOSWeChat () {
const ua = window.navigator.userAgent.toLowerCase()
return ua.includes("micromessenger") && ua.includes("like mac os x")
}
// input 失去焦点事件
inputBlur (e) {
if (isIOSWeChat()) {
// window.scrollTo(0, document.documentElement.scrollTop || document.body.scrollTop) 亦可
document.body.scrollTop = document.body.scrollTop;
}
}
本文首发于个人博客：https://www.aquatalking.com/b...
（完）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108991.html
摘要：描述打开系统的微信页面，当点击输入弹出输入法的时候，页面如果上移了，那输入法收起的时候页面无法自动回到底部，会留有空白，导致下次点击弹起的失效。判断是否为微信失去焦点事件亦可本文首发于个人博客完 1. BUG描述 打开 iOS 12 系统的微信 H5 页面，当点击 input 输入弹出输入法的时候，页面如果上移了，那输入法收起的时候页面无法自动回到底部，会留有空白，导致下次点击弹起的失...
摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。 前言 最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...
摘要：问题描述微信页面文本框失去焦点输入法收回会留有空白设备系统版本微信版本解决方法判断设备和微信环境 问题描述：ios微信H5页面文本框失去焦点输入法收回会留有空白； 设备：iphone XR 系统版本：ios 12.3.1 微信版本：7.3.1 解决方法 export default { data () { ...
摘要：问题描述微信页面文本框失去焦点输入法收回会留有空白设备系统版本微信版本解决方法判断设备和微信环境 问题描述：ios微信H5页面文本框失去焦点输入法收回会留有空白； 设备：iphone XR 系统版本：ios 12.3.1 微信版本：7.3.1 解决方法 export default { data () { ...
阅读 755·2021-11-09 09:47
阅读 1529·2019-08-30 15:44
阅读 1123·2019-08-26 13:46
阅读 2087·2019-08-26 13:41
阅读 1242·2019-08-26 13:32
阅读 3728·2019-08-26 10:35
阅读 3498·2019-08-23 17:16
阅读 418·2019-08-23 17:07
