微信6.7.4 ios12 软键盘收回时页面不回弹,导致光标位置错乱,再次点击输入框区域时无法focus
https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800
https://blog.csdn.net/qq_23370345/article/details/84757505
参考上述文章,可解决,补充多个输入框处理方法:
/* 问题: ios12+,微信6.7.4版本存在bug,键盘收回时,界面没有恢复,底下出现空白区域,并导致光标位置错乱,再次点击输入框区域时无法focus
解决方案: 当input失焦,键盘收回后,滚动一下页面就可以使页面恢复正常
补充: 当在手机号与验证码之间切换输入时,会同时触发前输入框的blur和后输入框focus,这个时候触发滚动,页面会出现较大跳跃,因此通过inFocus 和 setTimeout 判断,是切换input还是真正blur,真正blur的时候,再滚动页面
*/
//focus
iptFocus () {
this.errorMessage = '';
this.inFocus = true;
},
//blur
iptBlur () {
let this_ = this;
this_.inFocus = false;
setTimeout(function () {
if(this_.inFocus == false){
// 当input 失焦时,滚动一下页面就可以使页面恢复正常
this_.checkWxScroll();
}
},200)
},
checkWxScroll(){
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);
},
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通