我們先來看看效果：
當(dāng)用戶點擊輸入框時骤菠，輸入框會彈到數(shù)字鍵盤正上方瞄沙。這樣就完美的解決了鍵盤遮擋輸入框的問題己沛。
一、思路
當(dāng)輸入框獲得焦點時距境，如果這個輸入框被擋住申尼，就在頁面最底部增加一個空白div，這個div的高度就是被遮住的輸入框到數(shù)字鍵盤頂部的距離垫桂。當(dāng)輸入框失去焦點時师幕，就移除這個新增的div。
難點：新增div高度的計算
可以看上面這個草圖伪货，最后我們需要計算出Z的值们衙，這個Z就是底部新增div的高度钾怔。
二、代碼實現(xiàn)
（1）可視區(qū)域高度的計算（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）
遇到的坑：我看到網(wǎng)上有很多人都用這個方法蒙挑，但是我這樣使用的時候打印出來的值不論怎樣都是0宗侦。
document.documentElement.scrollTop||document.body.scrollTop
思考了很久才發(fā)現(xiàn)一個問題，就是如果我們要獲取滾動高度忆蚀，必須滿足兩個條件矾利，即該元素要有滾動條并且滾動條發(fā)生了滾動。上面那種方法獲取的是body的滾動高度馋袜，但是這個頁面的body并沒有發(fā)生滾動男旗，發(fā)生滾動的是一個class為content的元素，像下面這樣就能獲取到滾動高度了：
let dom = document.querySelector('.content')
let scrollTop = Math.floor(dom.scrollTop)
（4）數(shù)字鍵盤高度（keyboard）
遇到的坑：剛開始我給了這個keyboard一個固定的值欣鳖，在chrome上調(diào)試是正常的察皇，但是放到真機(jī)上就不行了。因為這個keyboard的高度是動態(tài)變化的泽台，寬一點的手機(jī)這個高度就會高一些什荣，窄一點的手機(jī)這個高度就會小一點。因為項目里采用rem適配方法怀酷，不同的機(jī)型fontSize是變化的稻爬，所以我們要計算鍵盤的真實高度，就要根據(jù)這個fontSize來計算,如下圖所示
let keyBoard = parseFloat(document.documentElement.style.fontSize) * (246/50)
（5）創(chuàng)建div插入頁面中蜕依，并將滾動條滾動到指定高度
將Z計算出來桅锄，就可以創(chuàng)建一個高度為Z的div。記住在每次將創(chuàng)建的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
