Question

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

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



[...]

        <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>

<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">  </ul> </div> </div>

当我运行应用程序时它工作正常，但当我点击搜索字段并点击设备的物理后退按钮时，整个页面中断：它看起来更大＆＃34;并且水平滚动，此外标题不再固定并滚动内容。

以下版本存在问题：

PhoneGap 2.7和2.9
jQuery 1.10.1和2.0.2
jQuery Mobile 1.3.1

*编辑*

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

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

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

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

尝试滚动列表视图，注意标题已固定在顶部
点击搜索字段
点击后退按钮（物理）
再次尝试滚动，标题不再修复
请注意，输入字段仍有一个指示焦点的发光

* /编辑*

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

谢谢，莫里吉奥

Answer 1

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

$(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');
        } 
    });
});

Answer 2

试试这个：

$("#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">

Android上的PhoneGap + jQM：后退按钮中断页面

2 个答案: