【問題背景】
>>> ios12+顺又，微信6.7.4版本存在bug,鍵盤收回時,界面沒有恢復,底下出現(xiàn)空白區(qū)域,并導致光標位置錯亂,再次點擊輸入框區(qū)域時無法focus
【解決方案】
解決方案: 當input失焦,鍵盤收回后,滾動一下頁面就可以使頁面恢復正常
補充: 當在手機號與驗證碼之間切換輸入時,會同時觸發(fā)前輸入框的blur和后輸入框focus,
這個時候觸發(fā)滾動,頁面會出現(xiàn)較大跳躍,因此通過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 && (osArr[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);
},
參考文章：https://blog.csdn.net/u010200636/article/details/85004087
