修复 iOS Web Input 输入框失去焦点无法还原页面滚动位置

Posted by Yinode on Thursday, June 13, 2019

TOC

推荐注册到 Vue 全局 Mixin 里 并在 updated 生命周期中重新运行

const fixInputPaddingMixin = {
  mounted() {
    this._fixInput();
  },
  updated() {
    this._fixInput();
  },
  methods: {
    _fixInput() {
      let inputs = document.querySelectorAll('input');
      if (inputs.length >= 1) {
        for (let item of inputs) {
          item.addEventListener(
            'focus',
            () => {
              item.scrollTop = document.body.scrollTop;
            },
            false,
          );
          item.addEventListener(
            'blur',
            () => {
              document.body.scrollTop = item.scrollTop || 0;
            },
            false,
          );
        }
      }
    },
  },
};