Question: Discover the test ios micro-channel terminal browser, input the out of focus, because the soft keyboard from the top of the page does not spring back to its original position, the need to manually swipe pages before they can resume; android client does not find this problem
Solution: When loss after the coke, the page automatically scrolls to the original position
in 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 in
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被组件包装的场景
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中的场景
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);
}
when using it
<input type="text" v-iosbugscroll />