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

未解
  • 2.7k

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

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

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

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

回复
阅读 7.2k
8 个回答

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

重新设计页面

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

nais
  • 5
新手上路,请多包涵

坐等这个问题解决方案,

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

方小新
  • 1
新手上路,请多包涵

移动端目前还是会有这个问题,苹果的输入法还在上面多加了一行,刚好遮挡住,有点尴尬

试一试这个函数:

$(function () {
        //微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法 
        window.addEventListener("resize", function () {
            if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
                window.setTimeout(function () {
                        document.activeElement.scrollIntoViewIfNeeded();
                    }, 0);
                }
            })
        })
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏