12082


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

[code]

    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();
    }
    
[/code]

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


CC BY-SA 3.0
2015-07-05T13:49:24.937
12053
2015-07-06T09:01:44.310
9621
question
monaca
[monaca]動的に作った要素にフォーカスを合わせるには？


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

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

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

index.html

[code]

    <!-- 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>
    
[/code]

javascript

[code]

    //// 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
    
[/code]


CC BY-SA 3.0
2015-07-06T09:01:44.310
12082
2015-07-06T09:01:44.310
3516
12053
answer