Android HTML5 - 软键盘重叠输入字段 [英] Android HTML5 - soft keyboard overlaps input field
问题描述
我有点累了在Android上通过软键盘寻找重叠输入字段的解决方案。我的问题与此类似：使用EditText字段重叠软键盘虽然在这种情况下，它出现在HTML5中，而不是本机应用程序。
I'm a bit tired looking for a solution for overlapping input field by soft keyboard on Android. My problem is very similiar to this one: Soft Keyboard Overlapping with EditText Field although in this case it occurs in HTML5, not native application.
更确切地说：当键盘完全覆盖输入字段时，整个页面会滚动并且此字段变为可见- 没关系。但如果此输入位于可见区域的边缘（键盘出现后），则我的软键盘会重叠，页面根本不会滚动。键入第一个标志后页面将会滚动。
More precisely: when the input field is fully covered by keyboard, a whole page is scrolled and this field become visible - that's OK. But if this input was on the edge of visible area (after keyboard appears), my soft keyboard overlaps it and page won't scroll at all. The page will be scrolled just after typing a first sign.
我的客户不喜欢这种行为......肯定会出现在Galaxy Tab 10上 - Android 4.0 .3，联想平板电脑 - 安卓3.1。
My customer doesn't like this behaviour... It occurs for sure on 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; 等等，但是没有用。
I have tried setting input's height, using box-sizing:border-box;, -webkit-appearance: textfield;, -webkit-user-select: text;, -webkit-writing-mode: horizontal-tb;, -webkit-rtl-ordering: logical; and few more, but nothing worked.
你有什么想法吗？我更喜欢CSS解决方案，在这种情况下，javascript页面滚动不是我的答案（客户要求）。
Have you got any idea? I would prefer CSS solutions, javascript page scrolling is not an answer for me in this case (customer requirements).
也许这只是一个Android Web浏览器错误，由于某些输入的父母风格而没有解决方法或某些特定问题（我已经尝试删除所有位置：绝对属性）？
Maybe it's just an Android Web Browser bug with no workarounds or some specific problem due to some of input's parents' style (I've already tried removing all position: absolute properties)?
欢迎所有建议。
推荐答案
我有这个烦人的问题，与我的css框架有关 - mobile-angular-ui。
因此，它已知在互联网上的错误，我花了几个小时在网上搜索修复，但不幸的是，没有一个提议的解决方案解决了我的特定情况。
最后我做了一些测试，结果发现这个行为是由我使用的框架引起的。
（我确实向mobile-angular-ui作者报告过，但我没有得到回复。）
你可能想做几次测试，就像我一样，找出这个问题是否相关到你的应用程序的架构，真的。注释掉所有的css代码，并从包含表单的空白纯HTML页面开始。
如果一切正常（表格应向上滚动显示在视图的可见部分，软键盘上方）当你的css被注释掉/关闭时，你的问题就在于css，就像我的情况一样。
对于那些在他们的应用程序中使用mobile-angular-ui并且遇到这个问题的人来说，这段代码为我做了这个工作：
I had this annoying issue, related to my css framework - mobile-angular-ui. So it's known bug on internet, and I spent hours on searching for fix on web,but unfortunately none of proposed solutions solved my particular case. At last I did some testing, and it turned out that this behaviour is caused by framework I used. (I did report it to mobile-angular-ui authors, but I didn't get response.) You probably want to do few tests, as I did, to find out if this issue is related to architecture of your app, really. Comment out all the css code and start from blank, pure html page with forms on it. If all's fine (form should scroll up to show in visible part of view, above of soft keyboard) when your css is commented out/switched off, your issue lies in css, just like in my case. For those who use mobile-angular-ui in their apps, and get into this issue, this piece of code did the job for me:
html {
overflow: auto;
}
body {
height:auto;
overflow: auto;
}
.scrollable {
position:inherit;
}
其余的取决于您的具体情况。
The rest depends on your particular case.
我希望这会有所帮助。
这篇关于Android HTML5 - 软键盘重叠输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
