0

通常の focus() でキーボードを表示することは、iOS サファリの onclick なしではほとんど不可能であることはわかっていますが、少し違うことをしようとしています。jquery モバイルを使用して、DOM に 2 つの異なるページ (data-role="page") をロードします。これらのページには両方ともテキスト入力があります。ユーザーが最初のページの入力をタップすると、2 番目のページを上にスライドして、2 番目のページの入力にフォーカスし、キーボードを表示します。これを実現するには、最初の入力にフォーカス イベント リスナーを作成し、通常の $('#secondpage').show() の後に $('#secondinput').focus() を指定します。ただし、show() の代わりに changePage() を使用したり、.show() にアニメーションを配置したりすると、フィールドはフォーカスされず、キーボードは表示されません。

最初のページからの私の入力は次のとおりです。

<input type="text" name="input1" id="input1" data-theme="A">

2 ページ目全体:

<div data-role="page" id="page2">
<div>
    <form>
        <input type="text" id="input2" name="input2">
    </form>
</div>
</div>

これは機能しますが、必要なトランジションを提供しない私の JavaScript です。これは、最初のページの pageinit に含まれています。また、これを機能させるには、#page2 に display:none を配置する必要があります。

$('#input1').on('tap', function() {
    $('#page2').show();
    $('#input2').focus();
});

次のコードは機能しません。

$('#input1').on('tap', function() {
    $('#page2').show("slide", { direction: "up" });
    $('#input2').focus();
});

これも機能しません (これが最も望ましい解決策です)。

$('#input1').on('tap', function() {
    $.mobile.changePage('#page2', { transition: 'slideup' });
    $('#input2').focus();
});

私が試したもう 1 つのことは、#input1 に onclick 属性を設定することですが、何をしても遷移がフォーカスとキーボードを殺してしまうようです。助言がありますか？

4

1 に答える 1

0

次のコードを試してください。page2 の読み込みが完了したときにのみ、input2 にフォーカスする必要があります。

$(document).bind('pageinit', function() {
    $('#input1').on('tap', function() {
        $.mobile.changePage('#page2', { transition: 'slideup' });

    }); 
    $("#page2").bind('pageshow', function() {
        $('#input2').focus();
    });
});

デモ

于 2013-04-11T04:55:32.133 に答える