問題 如圖一個表單： 在部分android機型上測試點擊靠下的輸入框時遇到彈出的軟鍵盤擋住輸入框問題，ios可自身彈起（ios自身的調整偶爾也會出問題，例如第三方鍵盤會遮擋，原因是第三方輸入法的tool bar或者鍵盤也被當做可視區域，這裡不做討論） 問題分析及解決辦法確立 最常見的是使用兩個方法： ...
問題
如圖一個表單：
在部分android機型上測試點擊靠下的輸入框時遇到彈出的軟鍵盤擋住輸入框問題，ios可自身彈起（ios自身的調整偶爾也會出問題，例如第三方鍵盤會遮擋，原因是第三方輸入法的tool bar或者鍵盤也被當做可視區域，這裡不做討論）
問題分析及解決辦法確立
最常見的是使用兩個方法：scrollIntoViewIfNeeded()、scrollIntoView()，使用方法自行百度。在我這裡無效。
經測試發現android彈出鍵盤時有兩種效果：
1.將activity擠壓，鍵盤也占一部分activity空間；
2.鍵盤彈出在瀏覽器上面覆蓋一層，不影響瀏覽器大小。
第二種會出現遮擋問題
於是想到以下兩種方案：
1.通過動態增加頁面高度和設置scrollTop來使輸入框到達合適的位置
2.設置相對定位，通過top來使輸入框到達合適的位置
影響實現的兩個點：
1.js拿不到鍵盤的彈出和收起事件;
2.覆蓋一層的鍵盤彈出方式不會觸發window.resize事件和onscroll事件。
解決
第一種經試驗有些問題影響了實現，這裡只討論第二種。
直接上代碼，這裡是react項目（css設置absolute配合js改變top實現效果，transition過渡增強用戶體驗，這裡就不放了）
getElementOffsetTop(el) {
let top = el.offsetTop
let cur = el.offsetParent
while(cur != null){
top += cur.offsetTop
cur = cur.offsetParent
}
return top
}
componentDidMount() {
const u = navigator.userAgent
const isAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1;//android終端
// alert('android'+isAndroid)
if(isAndroid){ // android統一處理，不影響ios的自身處理
const body = document.getElementsByTagName('body')[0] // 相容獲取body
const regDom = document.querySelector('.wrapper_register') // 獲取頁面根元素
const content = document.querySelector('.content') // 表單內容部分
// const scrollHeight = body.scrollHeight // 網頁文檔高
// const scrollTop = body.scrollTop// 捲上去的高
const clientHeight = body.clientHeight //可見高
const fixHeight = clientHeight/3 // 定位高，彈出鍵盤時input距瀏覽器上部的距離，自己定義合適的
// 符合需彈出鍵盤的元素query
const queryStr = 'input[type="text"], input[type="tel"], input[type="password"], textarea'
const inputs = content.querySelectorAll(queryStr)
// console.log(inputs)
const offsetTopArr = Array.prototype.map.call(inputs,item=>{
return this.getElementOffsetTop(item) // offsetTop只能獲取到頂部距它的offsetParent的距離，需此方法獲取到元素距頂部的距離
})
inputs.forEach((item, i)=>{
item.addEventListener('focus',()=>{
// 改變top上移頁面
regDom.style.top = '-' + (offsetTopArr[i] - fixHeight) + 'px'
})
item.addEventListener('blur',()=>{
// 恢復top
regDom.style.top = 0
})
})
}
}效果基本實現，這裡還有兩個問題：
第一，如果下麵的提交按鈕是fixed，有些手機鍵盤彈出時會把按鈕頂上來，如果上述代碼中fixHeight設置不合適，會導致這個按鈕遮擋輸入框。所以為了統一效果，將底部按鈕取消fixed，隨頁面滾動。
第二，如果點擊鍵盤上的收起鍵盤按鈕，會導致頁面top無法恢復，因為沒有觸發輸入框失焦方法，需點擊空白處恢復。（目前沒找到解決辦法）
後續
1.由於android彈出鍵盤存在一定延遲，所以可以給top更改添加setTimeout，設置合適的延遲時間。
2.兩個h5框架，iScroll、Native.js（雖然在這個問題上沒啥用）
3.最終奧義：修改設計稿，三招 -> 使輸入框不在頁面的下半部分、採用分頁設計、彈出輸入層（ps：要和產品和設計溝通，客戶不一定會讓步 0.0）
希望大家斧正，交流更好地解決方案，謝謝
