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
