jQuery Mobile响应面板和Textarea [英] jQuery Mobile Responsive Panel and Textarea
问题描述
我有jQuery Mobile应用程序 http://gudulin.ru/test/problem.html .
>页面加载后,左侧面板打开:
$('#my-panel').panel("open");
我在页面和@media CSS内容中添加了一个类ui-responsive-panel
,因此我可以一起处理面板和页面内容.
在笔记本电脑浏览器上一切正常,但在iPad浏览器(Safari或其他任何版本)上有问题.打开左侧面板后,我开始在文本区域中键入文本,键入任何符号后会跳出一个页面.当您开始在文本区域的底部键入内容时(当文本在键盘上滑落时),就会出现问题.
如果您听不懂我的意思,请观看视频: http://www.youtube.com/watch? v = Q6_kM_FshrQ .
如何复制:
- 使用iPad打开 http://gudulin.ru/test/problem.html
- 检查左侧面板是否打开
- 将任何内容写入文本区域,然后按Enter键两次.
谢谢.
我在jQuery Mobile论坛 ishmaelaz ,所以我将其留在此处以结束此问题.
尽管使用文本字段,但在类似的响应式面板布局中,我几个月来一直在解决相同的问题.上周,我找到了原因,但还没有时间对此问题进行演示.
要解决此问题,请编辑jquery.mobile并查找
_bindFixListener
:(在1.3.0中为8149行).在此例程中,注释掉throttledresize
处理程序.一旦这样做,跳跃就会停止.据我所知,这里的问题是iOS在您输入输入文本字段时发送调整大小事件.这导致此处理程序触发,从而调用_positionPanel. _positionPanel尝试确保面板是可见的,大概是因为此逻辑针对的是非响应场景,在这种情况下,面板实际上总是应该可见才有用,但是在响应场景中,它只会导致不断跳跃. /p>
可见键盘似乎是错误计算的关键部分,因为我发现,如果在页面底部添加一个高div以使其更长,那么此逻辑不会触发,似乎是因为页面底部不在键盘下方".不过,到目前为止,我还没有进行过测试,一旦找到一种使跳跃停止的方法,我就会感到很开心.
I've got jQuery Mobile application http://gudulin.ru/test/problem.html.
Left panel opens after page loads:
$('#my-panel').panel("open");
I added a class ui-responsive-panel
to my page and @media css stuff, so I can work with panel and page content together.
Everything is OK on laptops browser, but there is a problem on iPad browser (Safari or whatever else). When left panel is opened and I'm starting type text into text area, a page jumps after typing any symbol. The problem comes when you start typing at the bottom of textarea (when text goes down the keyboard).
If you didn't get what I mean watch the video: http://www.youtube.com/watch?v=Q6_kM_FshrQ.
How to reproduce:
- Open http://gudulin.ru/test/problem.html with iPad
- Check that the left panel is opened
- Write anything into text area and press enter button a couple of times.
Thanks.
I've pasted the same question on jQuery Mobile forum http://forum.jquery.com/topic/jquery-mobile-responsive-panel-and-textarea and got the answer from ishmaelaz, so I'm leaving it here to close this question.
I have been fighting the same problem for months in a similar responsive panel layout, although with text fields. I found the cause last week, but haven't had time to assemble a demonstration of the issue.
To work around the issue, edit jquery.mobile and look for
_bindFixListener
: (it's line 8149 in 1.3.0). In this routine, comment out thethrottledresize
handler. Once you do that, jumping stops.As best I can tell, the issue here is that iOS sends resize events as you type input text fields. This is causing this handler to fire, which calls _positionPanel. _positionPanel tries to ensure that the panel is visible, presumably since this logic is aimed at a non-responsive scenario in which case the panel really always should be visible to be useful, but in the responsive scenario, it just leads to constant jumping.
The keyboard being visible seems to be a crucial piece of the computations going wrong, as I've found that if you add a tall div to the bottom of the page to make it longer, then this logic doesn't trigger, seemingly since the bottom of the page isn't "under" the keyboard. I haven't tested that as far, though, as once I found a way to make the jump stop, I was happy.
这篇关于jQuery Mobile响应面板和Textarea的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!