1

我遇到了一个非常奇怪的问题。我的 PhoneGap 应用程序使用 jQM 作为 UI。

在第一页上，我固定了页眉和页脚以及带有嵌入式搜索字段的列表视图：

[...]

        <div data-role="content">
            <div id="main-calls-div">
                <ul data-role="listview" data-filter="true" data-filter-placeholder="Cerca" id="main-calls-list" data-icon="false">
                    <!-- Dinamically created on JS -->
                </ul>
            </div>
        </div>

当我运行该应用程序时，它运行良好，但是当我点击搜索字段并点击设备的物理后退按钮时，整个页面会中断：它看起来“更大”并水平滚动，此外标题不再固定并随着内容滚动.

以下版本存在问题：

  • PhoneGap 2.7 和 2.9
  • jQuery 1.10.1 和 2.0.2
  • jQuery 移动 1.3.1

* 编辑 *

我缩小了问题的范围：单击搜索字段时，元素获得焦点。按下后退按钮时不会丢失它，从而导致问题。

这是一个显示该问题的小型 Eclipse 项目：

http://dev.mobimentum.it/jsfiddle/test-17349904.zip

导入后，在 Android 设备上运行项目，重现问题：

  • 尝试滚动列表视图，注意标题固定在顶部

  • 点击搜索栏

  • 点击后退按钮（物理）

  • 再次尝试滚动，标题不再固定

  • 请注意，输入字段仍然有一个发光指示焦点

* /编辑 *

有人遇到过同样的问题吗？

谢谢，毛里齐奥

4

2 回答 2

0

对于有兴趣了解此问题的解决方法的任何人，我已经截获了键盘隐藏事件并模拟了单击以从输入元素释放焦点：

$(document).ready(function() {
    var curWindow = $(window);
    var initialHeight = curWindow.height();
    curWindow.resize(function() {
        console.log("resize: height="+curWindow.height());
        if (curWindow.height() == initialHeight) {
            $('.ui-focus').removeClass('ui-focus');
            $('.ui-content', $.mobile.activePage).trigger('click');
        } 
    });
});
于 2013-06-28T10:41:54.660 回答
0

试试这个：

$("#div[data-role=page]").each(function() {
   $(this).fixedtoolbar({ tap: true }); 
});

而且我认为您需要使用下一个元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
于 2013-06-28T17:08:19.290 回答