問(wèn)題:測(cè)試發(fā)現(xiàn)ios微信端瀏覽器中,input失焦后蔓肯,因軟鍵盤(pán)頂起的頁(yè)面沒(méi)有回彈到原來(lái)位置遂鹊,需手動(dòng)滑動(dòng)一下頁(yè)面才可以恢復(fù);android端沒(méi)有發(fā)現(xiàn)這個(gè)問(wèn)題
解決方法:當(dāng)失焦后蔗包,頁(yè)面自動(dòng)滾動(dòng)到原來(lái)位置
jQuery中
$('input,textarea').on('blur', function() {
var ua = navigator.userAgent.toLowerCase();
if(/micromessenger/.test(ua)) {
if(/iphone|ipad|ipod/.test(ua)) {
var currentPosition, timer;
var speed = 1;
timer = setInterval(function() {
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed;
window.scrollTo(0,currentPosition);
currentPosition+=speed;
window.scrollTo(0,currentPosition);
clearInterval(timer);
}, 1);
}
}
});
Vue.js中
Vue.directive('iosbugscroll', {
inserted: function(el, binding, vnode) {
var ua = navigator.userAgent.toLowerCase();
if(/micromessenger/.test(ua)) {
if(/iphone|ipad|ipod/.test(ua)) {
// input秉扑、textarea被組件包裝的場(chǎng)景
const childInput = el.getElementsByTagName('input');
const childTextarea = el.getElementsByTagName('textarea');
for (let i = 0; i < childInput.length; i++) {
childInput[i].onblur = function temporaryRepair() {
setTimeout(function() {
checkWxScroll();
}, 200);
};
}
for (let i = 0; i < childTextarea.length; i++) {
childSelect[i].onblur = function temporaryRepair() {
setTimeout(function() {
checkWxScroll();
}, 200);
};
}
// input、textarea中的場(chǎng)景
el.onblur = function temporaryRepair() {
setTimeout(function() {
checkWxScroll();
}, 200);
};
}
}
}
});
function checkWxScroll() {
var currentPosition, timer;
var speed = 1;
timer = setInterval(function() {
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed;
window.scrollTo(0,currentPosition);
currentPosition+=speed;
window.scrollTo(0,currentPosition);
clearInterval(timer);
}, 1);
}
使用時(shí)
<input type="text" v-iosbugscroll />