1

画面の中央に配置されるはずの固定要素があります。内部にも入力要素があります。当然のことながら、入力に焦点を合わせると、固定要素を含むページ全体が移動します。

ただし、ユーザーが「Go」キーまたは私が作成したボタンを押して、固定要素全体を非表示にし、入力をぼかした場合、次に固定要素を表示しようとすると、まだ場所がずれています（ページが戻ってきます）通常に）。画面の下部から半分スライドしたことを示します（入力がフォーカスされておらず、キーボードが下がっていても）。

どんな助けでもいただければ幸いです。私はこれについて髪を抜いてきました。これはPhoneGapプロジェクトに表示されていますが、MobileSafariで表示される標準のWebサイトを使用して問題を再現しました。

これが私のコードの一部です：

<!--(HTML)-->

<div class="smooth-button" onclick="show()">Show</div>

<div id="popin">
<input type="text" placeholder="Example!" />
<div class="smooth-button" onclick="save()">Save</div>
</div>

... 


/* (CSS) */

#popin {
    position: fixed;
    left: 50%;
    top: 50%;
    height: 400px;
    width: 300px;
    margin-top: -200px;  /*keeps it perfectly centered*/
    margin-left: -150px; /*keeps it perfectly centered*/
} 

#smooth-button {
    /* make the div look like a cool button */
}

...

// (JavaScript)

function show() {
    $("#popin").css('display', 'block');
}

function save() {
    //code to save text
    $("#popin").css('display', 'none');
}
4

1 に答える 1

1

右側のサイドバーにある「関連」リンクの1つから、次のページに移動しました。

iOS5の固定ポジショニングと仮想キーボード

答えを少し変更しただけで、完全に機能します。ここで、ボディのサイズを変更し、入力がぼやけた直後にボディを戻すと、固定要素の位置が更新されます。

$("input, textarea").live("blur", function(e) {
    setTimeout(function() {
        $("body").css("height", "+=1").css("height", "-=1");
    }, 0);
});
于 2013-02-17T23:49:17.083 に答える