键盘遮挡输入框解决方案

1.gif

我们先来看看效果：
当用户点击输入框时，输入框会弹到数字键盘正上方。这样就完美的解决了键盘遮挡输入框的问题。

一、思路

当输入框获得焦点时，如果这个输入框被挡住，就在页面最底部增加一个空白div，这个div的高度就是被遮住的输入框到数字键盘顶部的距离。当输入框失去焦点时，就移除这个新增的div。
难点：新增div高度的计算

徒手画的一个草图

可以看上面这个草图，最后我们需要计算出Z的值，这个Z就是底部新增div的高度。

二、代码实现

（1）可视区域高度的计算（visible）

  // 取窗口可视范围的高度
    getClientHeight () {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      return clientHeight
    },

（2）输入框到页面顶部的距离（toTop）

 getOffsetTop (obj) {
      var tmp = obj.offsetTop
      var node = obj.offsetParent
      while (node != null) {
        tmp += node.offsetTop
        node = node.offsetParent
      }
      return tmp
    },

（3）滚动高度（hide）
遇到的坑：我看到网上有很多人都用这个方法，但是我这样使用的时候打印出来的值不论怎样都是0。

document.documentElement.scrollTop||document.body.scrollTop

思考了很久才发现一个问题，就是如果我们要获取滚动高度，必须满足两个条件，即该元素要有滚动条并且滚动条发生了滚动。上面那种方法获取的是body的滚动高度，但是这个页面的body并没有发生滚动，发生滚动的是一个class为content的元素，像下面这样就能获取到滚动高度了：

let dom = document.querySelector('.content')
let scrollTop = Math.floor(dom.scrollTop)

（4）数字键盘高度（keyboard）
遇到的坑：刚开始我给了这个keyboard一个固定的值，在chrome上调试是正常的，但是放到真机上就不行了。因为这个keyboard的高度是动态变化的，宽一点的手机这个高度就会高一些，窄一点的手机这个高度就会小一点。因为项目里采用rem适配方法，不同的机型fontSize是变化的，所以我们要计算键盘的真实高度，就要根据这个fontSize来计算,如下图所示

计算真实高度

let keyBoard = parseFloat(document.documentElement.style.fontSize) * (246/50)

（5）创建div插入页面中，并将滚动条滚动到指定高度
将Z计算出来，就可以创建一个高度为Z的div。记住在每次将创建的dev append到页面中的时候，要让滚动条滚动一定的高度，这样才能让被遮挡的输入框正好弹到键盘上面。

          let ele = document.createElement('div')
          ele.setAttribute('class', 'add-height')
          ele.style.height = Z + 'px'
          ele.style.background = '#fff'
          dom.appendChild(ele)
          dom.scrollTop = toTop+ Z