所以我构建了一个漂亮,闪亮的HTML5应用程序,针对移动Safari和Android的默认浏览器.我正在测试它的Android版本是2.1和2.2.
我的应用程序在其中一个页面上有一个文本区域,而这个文本区域有时会包含大量文本.它基本上是一个自由形式的写作领域.
这在iOS中可以正常工作.然而,在Android上,当你输入时,屏幕会在每次击键时上下滚动,通常你无法看到你输入时输入的是什么,并且你会从所有的跳跃中感到头晕目眩.此外,如果文本区域内的内容超过其高度,则似乎无法在其中滚动.
甚至不让我开始横向模式.上述问题在那里更加明显.
这感觉就像Android的一个错误,因为我的textarea真的没什么特别的.我把它剥离到了必需品,它的行为也一样.
想知道是否有其他人在Android上的textareas有这么多的乐趣,可能会给出一些建议,或者至少是同情？
谷歌似乎已经成功地在Android的Gmail网络界面中解决了这个问题.我猜测有一些JS魔法正在进行,因为我的标记/ CSS是相同的.
我很高兴发现Android 2.2支持这个位置:固定的CSS选择器.我在这里建立了一个简单的证明概念:
http://kentbrewster.com/android-scroller/scroller.html
......这就像一个魅力.但是,当我尝试将INPUT标签添加到我的标题时,我遇到了麻烦.在焦点上,我到目前为止尝试的每个设备都克隆了INPUT标签,给它一个无限的Z-index,并在旧标签上重新绘制它.克隆位于大致正确的位置,但其父级的大多数CSS(当然包括位置:固定)将被忽略.克隆的INPUT标签的大小和形状错误,当我滚动页面的主体时,它会向上和向下滚动屏幕.
一旦它离开屏幕,就会出现欢闹声.有时设备会强制身体的滚动部分向下,这样克隆的空白就会回到视野中; 有时键盘会消失,即使可见的盒子似乎仍然在焦点上; 有时即使INPUT空白明显模糊,也无法解除键盘.以下是您可以在Android 2.2设备上运行以查看正在发生的情况的示例:
http://kentbrewster.com/android-input-style-bug/
样式输入:焦点还没有完成我的技巧,也没有很多不同的暴力尝试用JavaScript监听focus()和blur()并用焦点和键盘做正确的事情.
非常感谢您的帮助,
--Kent
我正在开发一个响应式网站,它有一个不同的移动或桌面样式表.一切看起来都不错,效果很好,直到文本输入与移动设备进行交互.他们出现了应有的表现.但是一旦点击(ehrm ..触摸),我发现Android中的浏览器开始像疯了一样滚动,打字时也是如此.但是,文本输入到输入中,并且输入上的软键盘/焦点不会丢失.
我的项目可以在这里找到:http://www.gortzfruit.nl/new/
问题是我一直在寻找解决方案一段时间,并发现类似的问题,解决方案没有为我解决.我一直在研究的一些主题和解决方案是:
https://github.com/scottjehl/Device-Bugs/issues/3 - 这里建议问题在于定位元素.特别是在固定定位元素内绝对.这在我的设计中反复出现,但一旦删除它就无法解决问题.
Android浏览器textarea滚动到处,无法使用 - 这表明问题出在css-properties -webkit-transform:translate3d(0,0,0); 和-webkit-backface-visibility:hidden;.我自己没有包含这些,但我认为我包含的Google Maps API可能会使用这些.在分析了Google Maps API生成的标记后,我发现他们也没有使用它.
当固定位置文本输入表单字段获得焦点时,如何防止滚动？ - 这一个专注于试图解决问题.设置主体溢出:隐藏; 被建议在聚焦时阻止滚动,但它对我不起作用.
在javascript中禁用对输入焦点的滚动 - 这里建议在keydown上返回false可能会解决问题,我试过没有成功.这个阻止我的文本实际输入输入.
我知道这与Android中的错误有关,导致这种奇怪的滚动.但我不知道如何应对这一点.对我来说,无论我是否知道如何避免这个错误,或者我是否找到了一个黑客来使这个bug变得不可思议.我只是想在文本框上键入和聚焦/模糊时摆脱奇怪的滚动行为.
提前致谢,
吉荣