質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

テキストボックスを生成し、次のテキストボックスにフォーカスを合わせたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 449

junya19970831

score 11

いつもお世話になっております。

jquery初心者です。

JANコードを連続で20個読み取る事ができる画面を作成しています。

初期生成されるテキストボックスに13文字入力した後、
新たにテキストボックスを生成し、次のテキストボックスにフォーカスを合わせるソースコードを書きたいと思っています。

初期生成されるものを含め、合計20個のテキストボックスを生成したいと考えていますが、

20個でテキストボックスを生成を止めること、また生成したテキストボックスにフォーカスを移動することができず、困っております。

初心者でソースコードが見にくいと思いますがご助言お願い致します。

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <script src="jquery-3.3.1.min.js"></script>
</head>

<body>
    <form>
        <div id="jan_input"></div>
        <input type="submit" value="送信">
    </form>
</body>

<script>
$(function(){

    var id_name = ["card_number1","card_number2","card_number3","card_number4","card_number5","card_number6","card_number7","card_number8","card_number9","card_number10","card_number10","card_number11","card_number12","card_number13","card_number14","card_number15","card_number16","card_number17","card_number18","card_number19","card_number20"];

    var piyo = document.getElementById("jan_input");

    jan_input = document.createElement("input");
    br = document.createElement("br");
    jan_input.setAttribute("type", "text");
    jan_input.setAttribute("id", id_name[1]);
    jan_input.setAttribute("maxlength", "13");
    jan_input.appendChild(br);
    piyo.appendChild(jan_input);
    piyo.appendChild(br);

    jan_input = document.createElement("input");
    br = document.createElement("br");
    jan_input.setAttribute("type", "text");
    jan_input.setAttribute("id", id_name[2]);
    jan_input.setAttribute("maxlength", "13");
    jan_input.appendChild(br);
    piyo.appendChild(jan_input);
    piyo.appendChild(br);


  var n=$('input[type=text][id^="card_number"]');        //最初のテキストボックスにフォーカスする

  var i=3;    // id_name[]の添字

  n.first().trigger('focus')

  .end().on('keyup',function() {

      var idx=n.index(this);
      var next_idx=idx>=n.length-1?0:idx+1;

      if($(this).val().length>=$(this).attr('maxlength')){
        $(this).attr('readonly',true);    //13文字テキスト入力後、テキストボックスを読取り不可にする

        jan_input = document.createElement("input");
        br = document.createElement("br");
        jan_input.setAttribute("type", "text");
        jan_input.setAttribute("id", id_name[i]);
        jan_input.setAttribute("maxlength", "13");
        jan_input.appendChild(br);
        piyo.appendChild(jan_input);
        piyo.appendChild(br);

        i++;

        n.eq(next_idx).trigger('focus');        //次のテキストボックスへフォーカス

      };
    });
});
</script>

</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • think49

    2018/04/03 14:26

    前質問と内容が同一に読めます。https://teratail.com/questions/120030

    キャンセル

  • junya19970831

    2018/04/03 14:37 編集

    ご指摘ありがとうございます。
    id属性のナンバリングは実装できましたが、また別の問題が出てきたのと
    仕様が変わったため、再度投稿しています。

    キャンセル

  • think49

    2018/04/03 14:40

    解決したのなら、前質問に解決方法を書き、ベストアンサーを選んで閉じて下さい。

    キャンセル

回答 1

checkベストアンサー

+1

■ 生成したテキストボックスにフォーカスが当たらない

var n=$('input[type=text][id^="card_number"]');        //最初のテキストボックスにフォーカスする

n.first().trigger('focus')

  .end().on('keyup',function() { ・・・


ここで取得した n に対してイベント keyup を設定しているからです。

このnには、
id=card_number1
id=card_number2
しか入っていませんので、
後から追加された分のテキストボックスにはforcusできないですし、keyupイベントも起こりません。

■ 20個でテキストボックスを生成を止める

その意思を感じられるコードが見当たりませんので、
他部分がうまく動く場合、テキストボックスは無限に増え続けると思います。

テキストボックスを生成する部分で、20個未満なら作りますよ 的な判断を付けたらいいですね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る