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 .

如何复制:

1. 使用iPad打开 http://gudulin.ru/test/problem.html
2. 检查左侧面板是否打开
3. 将任何内容写入文本区域，然后按Enter键两次.

谢谢.

解决方案

我在jQuery Mobile论坛

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:

1. Open http://gudulin.ru/test/problem.html with iPad
2. Check that the left panel is opened
3. 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 the throttledresize 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屋！