After resolving ios micro letter ends out of focus keyboard hidden, from the top of the page is not on the resilience

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 />

Guess you like

Origin blog.csdn.net/weixin_34000916/article/details/90853917