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