1

はじめまして、
Monacaにおいて動的に要素(テキストフォーム)を作り、そのうち最初のものにフォーカスを合わせるということをしたくて、以下のようにコードを書いたのですが、

function drawAnsSheet(){
    var text_form = "";
    for(i=0; i < digits; i++){
        text_form = text_form + '<INPUT type="text" class="class1" id="col' + i + '">';
    }

    $("#call_text").html(text_form);
    $('input:visible').eq(0).focus();
}

Chromeではうまく最初の要素にフォーカスが合ったのですが、Monacaですと、フォーカスが合いませんでした。フォーカスを合わせるにはどうすればいいのでしょうか。
よろしくお願い致します。

1 件の回答 1

1

タイミングの問題の様な気がします(画面に要素が表示される前にfocus()が呼ばれている)。
onloadとかsetTimeoutでタイミングをずらしてみると違った結果が出るのではないでしょうか。

もし、サンプルのメモ帳アプリのようにchangePageを使用しており、かつ移動先のページに追加した要素があるのであれば、ページが表示された時にフォーカスを合わせるようにするとうまくいくのではないかと思います。

少し分かりにくいかもしれませんがサンプルです(メモ帳アプリをベースにしています)。

index.html

<!-- TOP Page -->
<div data-role="page" id="TopPage">
    <header data-role="header" data-position="fixed" data-theme="c">
        <h1>Monaca Memo</h1>
        <a href="#AddPage" data-icon="plus" class="ui-btn-right">Add</a>
    </header>
</div>

<!-- Add Memo Page -->
<div data-role="page" id="AddPage">
    <section id="call_text">
    </section>
</div>

javascript

//// append input element
function appendForm() {
    var text_form = "";
    for(i=0; i < 5; i++){
        text_form = text_form + '<INPUT type="text" class="class1" id="col' + i + '">';
    }

    $("#call_text").html(text_form);
}

//// focus element
function focusElement() {
  $('input:visible').eq(0).focus();
}

///// Called when app launch
function onReady() {
    appendForm();

    // AddPageが表示されたら先頭の要素にフォーカスを合わせる
    $('#AddPage').on('pageshow', function(event, ui) {
      focusElement();
    });
}

$(onReady); // on DOMContentLoaded
1
  • ありがとうございました。 やはりタイミングの問題のようでした。 これそのものではないのですが、タイミングをずらして表示するようにしたらフォーカスが合うようになりました。
    – eksmin
    2015年7月7日 12:41

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。