登录

javascript - 如何解决在安卓微信环境下,键盘挡住了 web 输入框的问题?

问题是这样的,我在安卓的微信里打开一个网页时,如果这个网页里有个表单,当键盘显示出来时,会遮住表单底部的部分,并且不能通过滑动操作来显示底部的内容。只能填完一个输入框,隐藏掉键盘,再去点下一个输入框。同样一个页面,在 iOS 下就没有问题。

请问,有人知道该如何解决这样的问题吗?

补充一下:也不是所有的安卓下都有这个问题,我试下两个安卓设备,索尼的会有这个问题(另外据我们的测试提供的信息,小米的也会有),但是另外一台联想的设备就没问题。

页面本身是可以滚动的,只是被键盘遮住的那部分滚动不出来。

# JavaScript
PHP中文网PHP中文网2193 天前519 次浏览

全部回复(6) 我要回复

  • 高洛峰

    高洛峰2017-04-10 18:02:37

    你把网页底部padding或者margin加长就行了

    回复
    0
  • 迷茫

    迷茫2017-04-10 18:02:37

    重新设计页面

    回复
    0
  • PHP中文网

    PHP中文网2017-04-10 18:02:37

    容器设置CSS overflow:auto 就可以滑动了

    回复
    0
  • 阿神

    阿神2017-04-10 18:02:37

    坐等这个问题解决方案,

    回复
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 18:02:37

    看来是没有人回答了。。。

    回复
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 18:02:37

     // 如果是安卓端=>输入框输入的时候不会遮挡输入框
            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);
                    }
                })
            }

    回复
    0
  • 取消回复发送