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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

572閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/04/03 05:23

編集2018/04/03 05:31

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

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>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/04/03 05:37 編集

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

2018/04/03 05:40

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

回答1

0

ベストアンサー

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

javascript

1var n=$('input[type=text][id^="card_number"]'); //最初のテキストボックスにフォーカスする 2 3n.first().trigger('focus') 4 5 .end().on('keyup',function() { ・・・ 6

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

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

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

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

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

投稿2018/04/03 08:17

mix-peach

総合スコア1910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問