前言
一談起移動端的軟鍵盤處理疯潭，都是令人比較頭疼的事情赊堪，由于系統(tǒng)機型不同，導致出現(xiàn)鍵盤彈出效果也大有差異竖哩。最近做的項目中都遇到了這些問題哭廉，故寫此文章記錄一下。
目前知道有以下問題：
- Ios與Android的系統(tǒng)差異相叁，軟鍵盤彈出后群叶，頁面的webview表現(xiàn)是不同的。
- 如果頁面設(shè)計的input或者textarea位于頁面的中下部位钝荡，或者底部時街立，彈出軟鍵盤的時候會遮擋輸入框。
- 在微信版本6.7.4以上埠通，IOS系統(tǒng)版本12以上赎离，當軟鍵盤彈起后，頁面（webview）整體往上滾動端辱，當鍵盤收起后梁剔，不回到原位，導致鍵盤原來所在位置是空白的舞蔽。
問題解決
監(jiān)聽軟鍵盤的狀態(tài)
如果想對鍵盤事件做相應(yīng)的處理荣病，我們首先得獲取到軟鍵盤彈出或者收起的狀態(tài)，然后做相應(yīng)處理渗柿，但是H5中并無直接提供軟鍵盤彈起事件的監(jiān)聽方法个盆，那么脖岛，我們換種思路去實現(xiàn)監(jiān)聽。
由于上面提過颊亮，IOS與Android軟鍵盤彈起后柴梆，頁面webview表現(xiàn)是不同的，是怎樣的不同呢终惑？
1.IOS在點擊input框或者textarea框的之后绍在，軟鍵盤彈起，頁面的高度的高度并沒有改變雹有，只是webview整體上移了偿渡，并且執(zhí)行的scrollTop方法，scrollTop的距離即為軟鍵盤的高度霸奕。
2.Android在點擊input框或者textarea后卸察，軟鍵盤彈起，頁面高度改變铅祸，webview被壓縮。
在安卓上處理軟鍵盤時間
因此合武，對于Android機的軟鍵盤彈起或收起临梗，可以通過resize方法監(jiān)聽到，但是在IOS機型上稼跳，resize事件是不會觸發(fā)的盟庞。
簡單暴力點，對于Android機型的處理汤善，可以直接寫在index.html 的script里面什猖。如下：
const u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手機
window.addEventListener('resize', function () {
// Document 對象的activeElement 屬性返回文檔中當前獲得焦點的元素。
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
console.log('安卓觸發(fā)', document.activeElement.tagName)
window.setTimeout(function() {
document.activeElement.scrollIntoView(true);
}, 50);
}
})
}
這樣既可解決Android機型上軟鍵盤遮擋輸入框問題
關(guān)于scrollIntoView方法：
Element.scrollIntoView()方法讓當前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi),
這里接受一個參數(shù)红淡，可以是Boolean類型也可以是object類型不狮，這里，我們只說下
Boolean類型在旱，如果為true摇零，元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊，如果為false桶蝎，元素的底端將和其所在滾動區(qū)的可視區(qū)域的底端對齊驻仅。上面代碼中，我們設(shè)置了true,那么input或者textarea將會頂?shù)巾敳靠梢晠^(qū)域登渣。
在IOS上處理軟鍵盤事件
1.IOS上既然不會觸發(fā)resize事件噪服，那我們采用@focus和@blur來處理：
onFocus () {
const u = navigator.userAgent
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { // 安卓手機
} else { // ios
setTimeout(() => {
document.getElementsByTagName('body')[0].style.height = '400px'
this.$refs.ttextarea.scrollIntoView(false)
}, 50)
}
},
onBlur () {
setTimeout(function () {
document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px'
}, 50)
},
大致思路就是在聚焦的時候把頁面可視區(qū)域高度設(shè)置一個固定值，這里的400px只是參考值胜茧，具體需要調(diào)試計算粘优。scrollIntoView(false)講input或者是textarea滾動到可視區(qū)域底部，所以就是貼著軟鍵盤上方了。
2.還有一種思路就是在聚焦的時候敬飒，把頁面設(shè)置為fixed,這樣也能解決
處理在微信上ios軟鍵盤事件
在微信版本6.7.4以上邪铲，IOS系統(tǒng)版本12以上，當軟鍵盤彈起后无拗，頁面（webview）整體往上滾動带到，當鍵盤收起后，不回到原位英染，導致鍵盤原來所在位置是空白的揽惹，處理方法：在blur后處理：
onBlur () {
setTimeout(() => {
window.scrollTo(0, document.body.scrollTop + 1)
document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1)
}, 50)
},
