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

Question

我有点累了在Android上通过软键盘寻找重叠输入字段的解决方案.我的问题非常类似于:使用EditText字段进行软键盘重叠虽然在这种情况下它出现在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作者报告过,但我没有得到回复.)你可能想做一些测试,就像我一样,找出这个问题是否与你的app的架构有关,真的.注释掉所有的css代码,并从包含表单的空白纯HTML页面开始.如果你的css被注释掉/关闭,一切正常(表格应向上滚动显示在视图的可见部分,在软键盘上方),你的问题在于css,就像我的情况一样.对于那些在他们的应用程序中使用mobile-angular-ui并且遇到这个问题的人来说,这段代码为我完成了这项工作:

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

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

我希望这有帮助.

Answer 2

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

在 jQuery 中：

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

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