修復蘋果iOS 原生鍵盤遮擋input框

最近在作一個仿微信的聊天界面，有一個固定在頁面底部的input框，原本使用fixed定位在底部，在android手機上沒有任何問題，但在iOS上當點擊輸入內容的時候會出現不一樣狀況的原生鍵盤遮擋輸入框的狀況。度娘出了不少解決方法，但沒有一個方法能夠完美解決，並且發現不少人都有這個問題，本身就苦思冥想出了一個相對不錯的解決方法，跟你們分享一下。

先跟你們列舉一下網上的解決方法，還有個人實踐結果

position

// 修改position:fixed; 爲position:absolute;
// position:fixed;
position:absolute;
複製代碼

實踐證實沒有任何影響，就算不使用定位也會出現遮擋輸入框的狀況

scrollTop

setTimeout(function(){
    document.body.scrollTop = document.body.scrollHeight;
},300)
複製代碼

這種方法在iOS10上能夠解決遮擋的問題，但在iOS11上會出現鍵盤先將輸入框頂上去而後輸入框又快速回到屏幕底部再次被遮擋的狀況

scrollIntoView scrollIntoViewIfNeeded

這兩種方法徹底看不出任何效果

個人解決方法

直接上代碼

// css
.mainBox{
    height:100vh;
    position:relative;
}
.inputBox{
    position:absolute;
    bottom:0;
}
// 輸入框得到焦點事件
onFocus() {
    setTimeout(function(){
        // 設置body的高度爲可視高度+302
        // 302爲原生鍵盤的高度
        document.getElementsByTagName('body')[0].style.height = (window.innerHeight + 302) + 'px';
        document.body.scrollTop = 302;
    }, 300)
}
// 輸入框失去焦點事件
onBlur() {
    // 設置body恢復原來的高度
    document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px';
}
複製代碼

這種方法至關於給body增長一個鍵盤的高度，正好能夠佔掉鍵盤的位置，把頁面內容頂上去，而後還要阻止一個body的滾動事件，防止用戶滑動頁面把增長的302的白頁面滾動出來。 （由於手邊沒有iPhone X手機，因此在iPhone X上兼容多是不太完美，不過也就只是鍵盤的高度不一樣。能夠經過判斷手機型號設置不一樣高度的方式解決）

302雖然看起來不靠譜，但如今蘋果的大小屏手機原生鍵盤都是這個高度（目前測試在5s、7p、8沒有問題），如今來講沒有多大問題。也正在尋找更加完善的方法，結果出來再跟你們分享。別的輸入法也正在想辦法解決，有好的解決辦法的歡迎一塊兒交流學習