teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問テキストボックスの生成と、生成されたテキストボックスへのフォーカス

編集履歴

質問編集履歴

4

利用背景の追加

2018/04/03 06:55

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
  ｊquery初心者です。
4
4
 
5
+ Androidベースのバーコードリーダーで
5
6
  JANコードを連続で20個読み取る事ができる画面を作成しています。
7
+ webブラウザはGoogle chrome 56.0 を使用しています
6
8
 
7
9
  初期生成されるテキストボックスに13文字入力した後、
8
10
  新たにテキストボックスを生成し、次のテキストボックスにフォーカスを合わせるソースコードを書きたいと思っています。

3

質問内容の変更

2018/04/03 06:55

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- テキストボックスの自動生成とフォーカス、id属性のナンバリング
1
+ テキストボックスの生成と、生成されたテキストボックスへのフォーカス
body CHANGED
@@ -1,50 +1,89 @@
1
- お世話になります。
1
+ いつもお世話になっております。
2
2
 
3
- jquery初心者です。
3
+ ｊquery初心者です。
4
4
 
5
- テキストボックスに13文字文字を入力すると別のテキストボックスにカーソルがフォーカスするソースを書いています。
5
+ JANコードを連続で20個読み取る事ができる画面を作成しています。
6
6
 
7
- 現在のソースではあらかじめテキストボックス用意してカーソルをフォーカスしておりますが、
7
+ 初期生成されるテキストボックスに13文字入力した後、
8
- テキストボックスに13文字文字を入力すると、別のテキストボックスが改行されて自動生成され、そのテキストボックスにフォーカスする仕様にしたいと考えています。
8
+ 新たにテキストボックスを生成し、次のテキストボックスにフォーカスを合わせるソースコードを書きたいと思っています。
9
9
 
10
- その際にテキストボックスのidがid="card_number1"、id="card_number2"のように順番にナンバリングして生成できるようにしたいです。
10
+ 初期生成されるものを含め、合計20個のテキストボックスを生成したいと考えていますが、
11
11
 
12
- どのように書けば良いのでしょうか?
13
- ご助言よろしくお願いいたします。
12
+ 20個でテキストボックスを生成を止めること、また生成したテキストボックスにフォーカスを移動することができず、困っております。
14
13
 
15
- 環境は以下の通りです。
16
- Google Chrome ver.65
17
- Mac OS High Sierra 10.13.4
14
+ 初心者でソースコードが見にくいと思いますがご助言お願い致します。
18
15
 
19
16
 
20
17
 
18
+
21
19
  ```
22
20
  <!DOCTYPE html>
21
+
23
22
  <head>
24
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
23
+ <meta charset="UTF-8">
25
- <script src="jquery-3.3.1.min.js"></script>
24
+ <script src="jquery-3.3.1.min.js"></script>
26
25
  </head>
27
26
 
28
27
  <body>
29
- <form>
28
+ <form>
30
- <input type="text" id="card_number1" maxlength="13" > <br>
29
+ <div id="jan_input"></div>
31
- <input type="text" id="card_number2" maxlength="13" > <br>
32
- <input type="text" id="card_number3" maxlength="13" > <br>
33
- <input type="text" id="card_number4" maxlength="13" > <br>
34
- <input type="submit" value="送信">
30
+ <input type="submit" value="送信">
35
- </form>
31
+ </form>
36
32
  </body>
37
33
 
38
34
  <script>
39
35
  $(function(){
40
- var n=$('input[type=text][id^="card_number"]');
36
+
37
+ 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"];
38
+
39
+ var piyo = document.getElementById("jan_input");
40
+
41
+ jan_input = document.createElement("input");
42
+ br = document.createElement("br");
43
+ jan_input.setAttribute("type", "text");
44
+ jan_input.setAttribute("id", id_name[1]);
45
+ jan_input.setAttribute("maxlength", "13");
46
+ jan_input.appendChild(br);
47
+ piyo.appendChild(jan_input);
48
+ piyo.appendChild(br);
49
+
50
+ jan_input = document.createElement("input");
51
+ br = document.createElement("br");
52
+ jan_input.setAttribute("type", "text");
53
+ jan_input.setAttribute("id", id_name[2]);
54
+ jan_input.setAttribute("maxlength", "13");
55
+ jan_input.appendChild(br);
56
+ piyo.appendChild(jan_input);
57
+ piyo.appendChild(br);
58
+
59
+
60
+ var n=$('input[type=text][id^="card_number"]'); //最初のテキストボックスにフォーカスする
61
+
62
+ var i=3; // id_name[]の添字
63
+
41
64
  n.first().trigger('focus')
65
+
42
66
  .end().on('keyup',function() {
67
+
43
68
  var idx=n.index(this);
44
69
  var next_idx=idx>=n.length-1?0:idx+1;
70
+
45
71
  if($(this).val().length>=$(this).attr('maxlength')){
46
- $(this).attr('readonly',true);
72
+ $(this).attr('readonly',true); //13文字テキスト入力後、テキストボックスを読取り不可にする
73
+
74
+ jan_input = document.createElement("input");
75
+ br = document.createElement("br");
76
+ jan_input.setAttribute("type", "text");
77
+ jan_input.setAttribute("id", id_name[i]);
78
+ jan_input.setAttribute("maxlength", "13");
79
+ jan_input.appendChild(br);
80
+ piyo.appendChild(jan_input);
81
+ piyo.appendChild(br);
82
+
83
+ i++;
84
+
47
- n.eq(next_idx).trigger('focus');
85
+ n.eq(next_idx).trigger('focus'); //次のテキストボックスへフォーカス
86
+
48
87
  };
49
88
  });
50
89
  });

2

入力後のテキストボックスの書き込み不可処理

2018/04/03 05:44

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -27,10 +27,10 @@
27
27
 
28
28
  <body>
29
29
  <form>
30
- <input type="text" id="card_number1" maxlength="13"> <br>
30
+ <input type="text" id="card_number1" maxlength="13" > <br>
31
- <input type="text" id="card_number2" maxlength="13"> <br>
31
+ <input type="text" id="card_number2" maxlength="13" > <br>
32
- <input type="text" id="card_number3" maxlength="13"> <br>
32
+ <input type="text" id="card_number3" maxlength="13" > <br>
33
- <input type="text" id="card_number4" maxlength="13"> <br>
33
+ <input type="text" id="card_number4" maxlength="13" > <br>
34
34
  <input type="submit" value="送信">
35
35
  </form>
36
36
  </body>
@@ -43,6 +43,7 @@
43
43
  var idx=n.index(this);
44
44
  var next_idx=idx>=n.length-1?0:idx+1;
45
45
  if($(this).val().length>=$(this).attr('maxlength')){
46
+ $(this).attr('readonly',true);
46
47
  n.eq(next_idx).trigger('focus');
47
48
  };
48
49
  });
@@ -50,5 +51,4 @@
50
51
  </script>
51
52
 
52
53
  </html>
53
-
54
54
  ```

1

自動生成されたテキストボックスの改行の有無

2018/04/02 09:02

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,7 @@
5
5
  テキストボックスに13文字文字を入力すると別のテキストボックスにカーソルがフォーカスするソースを書いています。
6
6
 
7
7
  現在のソースではあらかじめテキストボックス用意してカーソルをフォーカスしておりますが、
8
- テキストボックスに13文字文字を入力すると別のテキストボックスが自動生成され、そのテキストボックスにフォーカスする仕様にしたいと考えています。
8
+ テキストボックスに13文字文字を入力すると、別のテキストボックスが改行されて自動生成され、そのテキストボックスにフォーカスする仕様にしたいと考えています。
9
9
 
10
10
  その際にテキストボックスのidがid="card_number1"、id="card_number2"のように順番にナンバリングして生成できるようにしたいです。
11
11