Question

我有jQuery Mobile应用程序http://gudulin.ru/test/problem.html。

页面加载后左侧面板打开： $('#my-panel').panel("open");

我在我的页面和@media css中添加了一个类ui-responsive-panel，因此我可以同时使用面板和页面内容。

笔记本电脑浏览器上的一切正常，但iPad浏览器（Safari或其他）存在问题。当左面板打开并且我开始在文本区域中键入文本时，在输入任何符号后页面会跳转。当您开始在textarea的底部键入时（文本在键盘上向下）时会出现问题。

如果您没理解我的意思，请观看视频：http://www.youtube.com/watch?v=Q6_kM_FshrQ。

如何重现：

使用iPad打开http://gudulin.ru/test/problem.html
检查左侧面板是否已打开
将任何内容写入文本区域并按几次回车按钮。

感谢。

Answer 1

我在jQuery Mobile论坛http://forum.jquery.com/topic/jquery-mobile-responsive-panel-and-textarea上粘贴了相同的问题，并从ishmaelaz得到了答案，所以我将其留在这里以关闭此问题。

在类似的响应式面板布局中，我几个月来一直在解决同样的问题，尽管有文本字段。我上周找到了原因，但没有时间组织这个问题的演示。

要解决此问题，请编辑jquery.mobile并查找_bindFixListener :(它是1.3.0中的第8149行）。在此例程中，注释掉throttledresize处理程序。一旦你这样做，跳跃停止。

我可以说，这里的问题是iOS在输入文本字段时发送调整大小事件。这导致此处理程序触发，调用_positionPanel。 _positionPanel尝试确保面板是可见的，大概是因为这个逻辑针对的是非响应场景，在这种情况下，面板实际上总是应该可见，但在响应场景中，它只会导致不断跳跃。 / p>
键盘可见是计算错误的关键部分，因为我发现如果你在页面底部添加一个高div来使其更长，那么这个逻辑不会触发，看似由于页面底部不是“键盘下”。不过我还没有测试过，因为一旦我找到了让跳跃停止的方法，我很高兴。

Answer 2

使用此window.resize due to virtual keyboard causes issues with jquery mobile

it will be great solution.
1) Go into jquery.mobile-1.x.x.js

2) Find $.mobile = $.extend() and add the following attributes:

last_width: null,
last_height: null,
3) Modify getScreenHeight to work as follows:

getScreenHeight: function() {
    // Native innerHeight returns more accurate value for this across platforms,
    // jQuery version is here as a normalized fallback for platforms like Symbian

    if (this.last_width == null || this.last_height == null || this.last_width != $( window ).width())
    {
        this.last_height = window.innerHeight || $( window ).height();
        this.last_width = $(window).width();
    }
    return this.last_height;
}

jQuery Mobile Responsive Panel和Textarea

2 个答案: