Android Browser textarea滚动到处,无法使用

时间:2010-12-20 12:57:38

标签: android html5 css3 mobile-website

所以我构建了一个漂亮,闪亮的HTML5应用程序,针对移动Safari和Android的默认浏览器。我正在测试它的Android版本是2.1和2.2。

我的应用程序在其中一个页面上有一个文本区域,而这个文本区域有时会包含大量文本。它基本上是一个自由形式的写作领域。

这在iOS中可以正常使用。然而,在Android上,当你输入时,屏幕会在每次击键时上下滚动,通常你无法看到你输入时输入的是什么,并且你会从所有的跳跃中感到晕眩。此外,如果textarea中的内容超过其高度,则似乎无法在其中滚动。

甚至不让我开始横向模式。上述问题在那里更加明显。

这感觉就像Android的一个错误,因为我的textarea真的没什么特别的。我把它剥离到了基本要素,它的行为也一样。

想知道是否有其他人在Android上使用textareas获得了这么多的乐趣,可能会给出一些建议,或者至少是同情?

似乎Google已成功解决了这个问题,在Android的Gmail网络界面中。我猜测有一些JS魔法正在进行,因为我的标记/ CSS是相同的。

4 个答案:

答案 0 :(得分:9)

解: 3D webkit在Android中被破坏,这导致了这个问题。确保你没有使用-webkit-transform:translate3d(0,0,0);或-webkit-backface-visibility:hidden;与投入有关的任何事情。 :(

答案 1 :(得分:4)

如果可能的话,您可以在用户键入时通过将body的overflow属性设置为“hidden”来锁定屏幕滚动 - 您可以在焦点/模糊事件上有选择地启用/禁用它。当然这意味着您的用户在键入

时无法滚动

答案 2 :(得分:1)

没有神奇的答案。 Android键盘输入与Web表单的交互简直是可怕的。您必须非常小心地穿针以使其正常工作,并且Android版本的键盘行为不一样。但是有很多工作是可能的(参见我们的Sencha Touch框架,了解当今可能的情况 - 其他移动Web框架也在解决完全相同的问题)。

答案 3 :(得分:0)

我几乎在每一页上都会遇到这种情况。在StackOverflow上,在wordpress博客上等等。

我只能想象这是Android浏览器中的可用性错误/问题,这就是为什么我更喜欢本机UI /应用程序:)