微信H5页面 ios12 软键盘收回时页面不回弹,导致光标位置错乱,再次点击输入框区域时无法focus
问题描述:ios12+,微信H5页面存在bug,键盘收回时,界面没有恢复,底下出现空白区域,并导致光标位置错乱,再次点击输入框区域时无法focus,弹框按钮无法点击
解决方案:当input失焦,键盘收回后,滚动一下页面就可以使页面恢复正常
补充:当在手机号与验证码之间切换输入时,会同时触发前输入框的blur和后输入框focus,这个时候触发滚动,页面会出现较大跳跃,因此通过inFocus 和 setTimeout 判断,是切换input还是真正blur,真正blur的时候,再滚动页面
参考:https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800
参考:https://blog.csdn.net/qq_23370345/article/details/84757505
参考:https://blog.csdn.net/u010200636/article/details/85004087
methods: {
getBlur(input) {
var _this = this
setTimeout(function () {
// 当input 失焦时,滚动一下页面就可以使页面恢复正常
_this.checkWxScroll();
}, 200)
},
checkWxScroll() {
//if (isIphone()) {
this.temporaryRepair();
//}
//var ua = navigator.userAgent.toLowerCase();
//var u = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
//if (ua.match(/MicroMessenger/i) == 'micromessenger' && !!u) { //在iphone 微信中
// var osVersion = navigator.userAgent.match(/iPhone\sOS\s([\d\_]+)/i);
// var osArr = osVersion.length >= 1 ? osVersion[1].split('_') : [];
// var newOS = osArr.length>=2 && (versionArr[0]>11)
// if (newOS) { //如果iphone版本号>=12
//this.temporaryRepair();
// }
//}
},
temporaryRepair() {
var currentPosition, timer;
var speed = 1; //页面滚动距离
timer = setInterval(function() {
currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
currentPosition -= speed;
window.scrollTo(0, 0); //页面向上滚动
// currentPosition += speed; //speed变量
// window.scrollTo(0, currentPosition); //页面向下滚动
clearInterval(timer);
}, 1);
},
}
版权声明:
作者:Joe.Ye
链接:https://www.appblog.cn/index.php/2023/03/18/when-ios-12-soft-keyboard-on-wechat-h5-page-is-retracted-the-page-does-not-rebound-causing-the-cursor-position-to-be-disordered-and-unable-to-focus-when-clicking-on-the-input-box-area-again/
来源:APP全栈技术分享
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论