欢迎光临
我们一直在努力

解决ios微信端失焦键盘隐藏后,被顶起的页面不回弹问题

问题:测试发现ios微信端浏览器中,input失焦后,因软键盘顶起的页面没有回弹到原来位置,需手动滑动一下页面才可以恢复;android端没有发现这个问题
解决方法:当失焦后,页面自动滚动到原来位置

$('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被组件包装的场景
        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);
}

使用时

<input  type="text" v-iosbugscroll />

未经允许不得转载:web前端开发 » 解决ios微信端失焦键盘隐藏后,被顶起的页面不回弹问题
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们