安卓HTML5 - 软键盘覆盖输入框

Question

我已经厌倦了在Android上寻找重叠输入字段的解决方法。我的问题与这个问题非常相似：Soft Keyboard Overlapping with EditText Field，尽管在这种情况下它出现在HTML5中，而不是本地应用程序。

更确切地说：当输入字段完全被键盘覆盖时，整个页面会滚动，并且该字段变得可见-这没问题。但是，如果此输入位于可见区域的边缘（键盘出现后），则我的软键盘将其覆盖，并且页面根本不会滚动。页面将在输入第一个字符后滚动。

我的客户不喜欢这种行为......它肯定会发生在Galaxy Tab 10“- Android 4.0.3，Lenovo Tablet- Android 3.1上。

我已经尝试设置输入的高度，使用box-sizing:border-box;，-webkit-appearance: textfield;，-webkit-user-select:text;，-webkit-writing-mode:horizontal-tb;，-webkit-rtl-ordering:logical;和其他一些方法，但都没有效果。

你有什么想法吗？我更喜欢CSS解决方案，在这种情况下，javascript页面滚动不是我的答案（客户要求）。

也许这只是一个Android Web浏览器错误，没有解决方法，或者由于某些输入父级样式的特定问题（我已经尝试删除了所有position:absolute;属性）？

欢迎提出所有建议。

- hogancool

---

我希望这个问题有可用的解决方案，一些大师必须向我们揭示！ - Zain Shaikh

Answer 1

我遇到了一个非常烦人的问题，与我的css框架-mobile-angular-ui有关。这是在互联网上已知的错误，在网上搜索修复方案花费了我数小时，但不幸的是，没有一种提出的解决方案能够解决我的特定情况。最后，我进行了一些测试，结果发现这种行为是由我使用的框架引起的。（我已向mobile-angular-ui作者报告了此问题，但未得到回复。）你可能想像我一样进行一些测试，以找出是否与您应用程序的架构相关的问题。注释掉所有的CSS代码，并从纯HTML页面开始，其中包含表单。如果当您的CSS被注释/关闭时一切正常（表单应该向上滚动以在可见部分的视图上显示，软键盘上方），则您的问题就像我一样在CSS中。对于那些在他们的应用程序中使用mobile-angular-ui并遇到此问题的人，下面的代码对我有用：

html {
    overflow: auto;
}
body {
    height:auto;
    overflow: auto;
}
.scrollable {
    position:inherit;
}

取决于您的具体情况。

希望这可以帮助到您。

- robjez

Answer 2

解决Android中的问题（现在在iOS7中也存在）最简单的方法是使用输入焦点和失焦事件。如果您没有使用页脚标签，请将其替换为页脚元素的类。

在jQuery中：

$("input").focus(function(){
    $('footer').hide();
});

$("input").blur(function(){
    $('footer').show();
});

- tnt-rox