安卓輸入法遮擋輸入框，安卓原生APP內(nèi)嵌H5的問(wèn)題
隨筆備忘
近一周主要做了一個(gè)簡(jiǎn)單的H5問(wèn)卷調(diào)查頁(yè)面（評(píng)分）通铲，應(yīng)用環(huán)境是web旺矾，并且需要內(nèi)嵌在原生APP中，效果如下：
剛開(kāi)始認(rèn)為是分分鐘搞定的事情逗概，結(jié)果差點(diǎn)栽了跟頭弟晚，主要問(wèn)題如題。
問(wèn)題描述：在web端安卓系統(tǒng)手機(jī)上逾苫，swiper的slide分頁(yè)在喚起輸入法后出現(xiàn)卿城；
問(wèn)題1：輸入法彈出后（實(shí)際是輸入任意字符后，若不做任何輸入操作铅搓，僅有遮擋輸入框的問(wèn)題）瑟押，頁(yè)面布局變化，下一頁(yè)slide的內(nèi)容在當(dāng)前頁(yè)面顯示星掰，切關(guān)閉輸入法后無(wú)法恢復(fù)勉耀，當(dāng)前slide顯示原頁(yè)面下半部分，及下個(gè)slide的上辦部分（出現(xiàn)原因主要是由于頁(yè)面大小改變導(dǎo)致）蹋偏；網(wǎng)上有類似問(wèn)題便斥，但沒(méi)有找到好的解決方案，最后嘗試了幾次最后通過(guò)給swiper-wrapper類名的標(biāo)簽添加固定定位fix解決威始；但實(shí)際上是討巧的方法枢纠，在輸入框彈出狀態(tài)時(shí)若去滾定頁(yè)面有驚喜，但鑒于此操作可能性不大黎棠，暫且通過(guò)此方法處理晋渺；
問(wèn)題2：在處理了問(wèn)題1后，輸入法遮擋輸入框的問(wèn)題就比較好解決了脓斩，網(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端的遮擋問(wèn)題以及swiper下的布局問(wèn)題；但~
問(wèn)題3：在web端算是解決了輸入法造成的問(wèn)題随静，但在內(nèi)嵌在安卓APP里時(shí)問(wèn)題又出現(xiàn)了八千；輸入法遮擋的問(wèn)題解決無(wú)效，這里和安卓開(kāi)發(fā)溝通后燎猛，他表示沒(méi)有很好的方法恋捆；最后的最后~~當(dāng)然是該需求了~~~
其實(shí)最有效的方法是在頁(yè)面設(shè)計(jì)初期將輸入框置于頁(yè)面的上半屏。那么問(wèn)題就將不復(fù)存在重绷；本頁(yè)面是通過(guò)下方的《其他意見(jiàn)》按鈕呼出隱藏的輸入框沸停，并focus ，這樣輸入法也會(huì)自動(dòng)彈出昭卓，體驗(yàn)上不會(huì)差很多愤钾；
