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

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

作者: hongi_k | 来源:发表于2019-06-04 22:04 被阅读0次

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

    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被组件包装的场景
            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 />
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/dwfdxctx.html