android - 在Android Chrome上隐藏在键盘后面的输入文本框

Question

我有一个如下格式的移动网页:

标题 - 标志等 - 绝对定位

内容 - 可滚动，绝对定位

页脚，40px 绝对定位

内容区域有多个输入框。在 Android 上的 Chrome 上，点击页面底部的输入框会导致输入当软键盘弹出时不可见。这页纸确实滚动以尝试向上移动框，但实际上还不足以可见。它最终隐藏在页脚后面。

知道如何解决这个问题吗？这只发生在 Chrome-Android 上。 iOS 上的 SafariWindows Phone 和其他移动浏览器上的 IE 运行良好。

Answer 1

我希望只有 CSS 的解决方案，但我认为没有。 Gaunt Face 的回答是一个很好的方法。不幸的是，在我的情况下，这需要进行一些更改，并且可能会破坏自动化(因为 URL 添加了#targets)。

我通过更改 2 个点击处理程序中的位置类型解决了这个问题。

我对任何输入/文本区域字段都有一个点击处理程序。在该单击处理程序中，我将表单容器 div 的位置样式更改为静态。请注意，如果容器字段有滚动条，这会将页脚推到底部。在我的情况下，这不是问题，因为当键盘弹出时，只有几个字段可见。用户看不到任何差异。

当用户点击输入字段时，我有第二个处理程序 - 页面点击处理程序 - 我将位置类型恢复为绝对，使页面看起来像以前一样。

这有一个意想不到的后果 - 滚动位置丢失。我通过获取输入字段的偏移量并使用该偏移量在父 div 上调用 scrollTop 来解决此问题，从而恢复位置。

我已经看到了一些关于此的问题，但没有找到答案。我希望这可以帮助别人。