安卓輸入法遮擋輸入框，安卓原生APP內(nèi)嵌H5的問題
隨筆備忘
近一周主要做了一個(gè)簡單的H5問卷調(diào)查頁面（評(píng)分），應(yīng)用環(huán)境是web，并且需要內(nèi)嵌在原生APP中，效果如下：
剛開始認(rèn)為是分分鐘搞定的事情，結(jié)果差點(diǎn)栽了跟頭，主要問題如題。
問題描述：在web端安卓系統(tǒng)手機(jī)上，swiper的slide分頁在喚起輸入法后出現(xiàn)；
問題1：輸入法彈出后（實(shí)際是輸入任意字符后，若不做任何輸入操作，僅有遮擋輸入框的問題），頁面布局變化，下一頁slide的內(nèi)容在當(dāng)前頁面顯示，切關(guān)閉輸入法后無法恢復(fù)，當(dāng)前slide顯示原頁面下半部分，及下個(gè)slide的上辦部分（出現(xiàn)原因主要是由于頁面大小改變導(dǎo)致）；網(wǎng)上有類似問題，但沒有找到好的解決方案，最后嘗試了幾次最后通過給swiper-wrapper類名的標(biāo)簽添加固定定位fix解決；但實(shí)際上是討巧的方法，在輸入框彈出狀態(tài)時(shí)若去滾定頁面有驚喜，但鑒于此操作可能性不大，暫且通過此方法處理；
問題2：在處理了問題1后，輸入法遮擋輸入框的問題就比較好解決了，網(wǎng)上有很多方法，如下：
if (/Android/gi.test(navigator.userAgent)) {
window.addEventListener('resize', function () {
if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
})
}
以上很好的解決了安卓設(shè)備在web端的遮擋問題以及swiper下的布局問題；但~
問題3：在web端算是解決了輸入法造成的問題，但在內(nèi)嵌在安卓APP里時(shí)問題又出現(xiàn)了；輸入法遮擋的問題解決無效，這里和安卓開發(fā)溝通后，他表示沒有很好的方法；最后的最后~~當(dāng)然是該需求了~~~
其實(shí)最有效的方法是在頁面設(shè)計(jì)初期將輸入框置于頁面的上半屏。那么問題就將不復(fù)存在；本頁面是通過下方的《其他意見》按鈕呼出隱藏的輸入框，并focus ，這樣輸入法也會(huì)自動(dòng)彈出，體驗(yàn)上不會(huì)差很多；
