1

非常に奇妙な問題が発生しています。私の PhoneGap アプリは、UI に 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>

アプリを実行すると正常に動作しますが、検索フィールドをタップしてデバイスの物理的な戻るボタンを押すと、ページ全体が壊れます。「大きく」見えて水平にスクロールし、さらにヘッダーが固定されなくなり、コンテンツとともにスクロールします.

問題は次のバージョンに存在します。

  • 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 に答える