安卓輸入法遮擋輸入框，安卓原生APP內嵌H5的問題

隨筆備忘

近一周主要做了一個簡單的H5問卷調查頁面（評分），應用環境是web，并且需要內嵌在原生APP中，效果如下：

剛開始認為是分分鐘搞定的事情，結果差點栽了跟頭，主要問題如題。

問題描述：在web端安卓系統手機上，swiper的slide分頁在喚起輸入法后出現；

問題1：輸入法彈出后（實際是輸入任意字符后，若不做任何輸入操作，僅有遮擋輸入框的問題），頁面布局變化，下一頁slide的內容在當前頁面顯示，切關閉輸入法后無法恢復，當前slide顯示原頁面下半部分，及下個slide的上辦部分（出現原因主要是由于頁面大小改變導致）；網上有類似問題，但沒有找到好的解決方案，最后嘗試了幾次最后通過給swiper-wrapper類名的標簽添加固定定位fix解決；但實際上是討巧的方法，在輸入框彈出狀態時若去滾定頁面有驚喜，但鑒于此操作可能性不大，暫且通過此方法處理；

問題2：在處理了問題1后，輸入法遮擋輸入框的問題就比較好解決了，網上有很多方法，如下：

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);

}

})

}

以上很好的解決了安卓設備在web端的遮擋問題以及swiper下的布局問題；但~

問題3：在web端算是解決了輸入法造成的問題，但在內嵌在安卓APP里時問題又出現了；輸入法遮擋的問題解決無效，這里和安卓開發溝通后，他表示沒有很好的方法；最后的最后~~當然是該需求了~~~

其實最有效的方法是在頁面設計初期將輸入框置于頁面的上半屏。那么問題就將不復存在；本頁面是通過下方的《其他意見》按鈕呼出隱藏的輸入框，并focus ，這樣輸入法也會自動彈出，體驗上不會差很多；