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

liupl發表於2019-03-03
蘋果iOS

最近在做一個仿微信的聊天介面，有一個固定在頁面底部的input框，本來使用fixed定位在底部，在android手機上沒有任何問題，但在iOS上當點選輸入內容的時候會出現不同情況的原生鍵盤遮擋輸入框的情況。度娘出了很多解決方法，但沒有一個方法可以完美解決，而且發現很多人都有這個問題，自己就苦思冥想出了一個相對不錯的解決方法，跟大家分享一下。

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

先跟大家列舉一下網上的解決方法，還有我的實踐結果

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沒有問題），現在來說沒有多大問題。也正在尋找更加完善的方法，結果出來再跟大家分享。別的輸入法也正在想辦法解決，有好的解決辦法的歡迎一起交流學習

相關文章