安卓输入法遮挡输入框，安卓原生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 ，这样输入法也会自动弹出，体验上不会差很多；
网友评论