关于移动端输入法遮住input输入框相关问题

1. 法一 也是主流方法，但是可能我们项目里的输入法没有占据屏幕也就是clientHeight ，因此失败。

	Element.scrollIntoView() //使当前的元素滚动到浏览器的可视区域内
	Element.scrollIntoViewIfNeeded()  //若当前元素已经在浏览器的可视区域内则不滚动否则滚动

2. 法二 改变根元素的高度：

• 在vue里注册一个全局方法，需要在每个input被遮住的页面mounted 之后使用，否则dom未渲染，获取不到页面 高度
• 根元素 position 为absolute 并且overflow：scroll；

function controlKeyboard() {
  setTimeout(() => {
    const regDom = document.querySelector('#app') // 获取页面根元素
    const queryStr = 'input[type="number"],input[type="text"], input[type="tel"], input[type="password"], textarea'
    const inputs = regDom.querySelectorAll(queryStr);
    const fixHeight = 348;
    var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    inputs.forEach((item, i) => {
      item.addEventListener('focus', () => {
        // 改变高度上移页面
        regDom.style.height = (nowClientHeight - 320) + 'px';
      })
      item.addEventListener('blur', () => {
        // 恢复高度
        regDom.style.height = nowClientHeight + 'px';
      })
    });
  }, 1000);

}
export default {
  install: function (Vue) {
    Vue.prototype.controlKeyboard = () => controlKeyboard()
  }
};

3 法三改变根元素的top值 要求和上面一样 只是用户体验效果不是很好，top改了之后，无法上下滑动了

function controlKeyboard() {
  setTimeout(() => {
    const regDom = document.querySelector('#app') // 获取页面根元素
    const queryStr = 'input[type="number"],input[type="text"], input[type="tel"], input[type="password"], textarea'
    const inputs = regDom.querySelectorAll(queryStr);
    const fixHeight = 348;

    function getElementOffsetTop(el) {
      let top = el.offsetTop
      let cur = el.offsetParent
      while (cur != null) {
        top += cur.offsetTop
        cur = cur.offsetParent
      }
      return top
    };
    const offsetTopArr = Array.prototype.map.call(inputs, item => {
      return getElementOffsetTop(item) // offsetTop只能获取到顶部距它的offsetParent的距离，需此方法获取到元素距顶部的距离
    })
    var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    inputs.forEach((item, i) => {
      item.addEventListener('focus', () => {
        // 改变top上移页面
        regDom.style.top = '-' + (offsetTopArr[i] - fixHeight) + 'px';
        // 改变高度上移页面
        //regDom.style.height = (nowClientHeight - 320) + 'px';
      })
      item.addEventListener('blur', () => {
        // 恢复top
        regDom.style.top = 0
        // 恢复高度
       
        regDom.style.height = nowClientHeight + 'px';
      })
    });
  }, 1000);

}
export default {
  install: function (Vue) {
    Vue.prototype.controlKeyboard = () => controlKeyboard()
  }
};