Question

我有点厌倦在Android上通过软键盘寻找重叠输入字段的解决方案。我的问题非常类似于Soft Keyboard Overlapping with EditText Field，尽管在这种情况下它出现在HTML5中，而不是本机应用程序。

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

我的客户不喜欢这种行为......它确实出现在Galaxy Tab 10“ - Android 4.0.3，联想平板电脑 - 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属性）？

欢迎所有建议。

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;
}

其余的取决于你的具体情况。

我希望这会有所帮助。

Answer 2

解决此问题的最简单方法（现在也在ios7中）是使用输入焦点和模糊事件。如果您没有使用页脚标记，只需将其替换为页脚元素的类。

在jQuery中：

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

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

Android HTML5 - 软键盘重叠输入字段

2 个答案: