处理输入法挡住输入框

定义指令

let timer = null;
Vue.directive('fixKeyBoardBug', {
  inserted(el) {
    const fixKeyBoardBugFocus = function () {
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
          const {top, height} = el.getBoundingClientRect()
          const st = top + height - window.visualViewport.height + 50
          if (st > 0) {
            window.scrollTo(0, st);
          }
        }, 300);
    };
    const fixKeyBoardBug = function () {
        timer = setTimeout(() => {
            var scrollTop = window.scrollTop;
            window.scrollTo(0, 0);
            setTimeout(() => {
                window.scrollTo(0, scrollTop);
            }, 0);
        }, 100);
    };
    el.addEventListener('blur', fixKeyBoardBug);
    el.addEventListener('focus', fixKeyBoardBugFocus)
  }
});

使用

      <input v-fixKeyBoardBug type="tel" maxlength="11" placeholder="请输入手机号" />
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容