14

我有点厌倦了在 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属性）而导致一些特定问题？

欢迎所有建议。

4

2 回答 2

7

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.

I hope this helps.

于 2014-09-08T13:38:15.870 回答
0

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

在 jQuery 中：

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

$("input").blur(function(){
    $('footer').show();
});
于 2013-10-09T12:18:40.700 回答