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

編集履歴

質問編集履歴

4

利用背景の追加

2018/04/03 06:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,11 @@
6
6
 
7
7
 
8
8
 
9
+ Androidベースのバーコードリーダーで
10
+
9
11
  JANコードを連続で20個読み取る事ができる画面を作成しています。
12
+
13
+ webブラウザはGoogle chrome 56.0 を使用しています
10
14
 
11
15
 
12
16
 

3

質問内容の変更

2018/04/03 06:55

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- テキストボックスの自動生成とフォーカス、id属性のナンバリング
1
+ テキストボックスの生成と、生成されたテキストボックスへのフォーカス
test CHANGED
@@ -1,36 +1,32 @@
1
- お世話になります。
1
+ いつもお世話になっております。
2
2
 
3
3
 
4
4
 
5
- jquery初心者です。
5
+ ｊquery初心者です。
6
6
 
7
7
 
8
8
 
9
- テキストボックスに13文字文字を入力すると別のテキストボックスにカーソルがフォーカスするソースを書いています。
9
+ JANコードを連続で20個読み取る事ができる画面を作成しています。
10
10
 
11
11
 
12
12
 
13
- 現在のソースではあらかじめテキストボックス用意してカーソルをフォーカスしておりますが、
13
+ 初期生成されるテキストボックスに13文字入力した後、
14
14
 
15
- テキストボックスに13文字文字を入力すると、別のテキストボックスが改行されて自動生成され、そのテキストボックスにフォーカスする仕様にしたいと考えています。
15
+ 新たにテキストボックスを生成し、次のテキストボックスにフォーカスを合わせるソースコードを書きたいと思っています。
16
16
 
17
17
 
18
18
 
19
- その際にテキストボックスのidがid="card_number1"、id="card_number2"のように順番にナンバリングして生成できるようにしたいです。
19
+ 初期生成されるものを含め、合計20個のテキストボックスを生成したいと考えていますが、
20
20
 
21
21
 
22
22
 
23
- どのように書けば良いのでしょうか?
24
-
25
- ご助言よろしくお願いいたします。
23
+ 20個でテキストボックスを生成を止めること、また生成したテキストボックスにフォーカスを移動することができず、困っております。
26
24
 
27
25
 
28
26
 
29
- 環境は以下の通りです。
27
+ 初心者でソースコードが見にくいと思いますがご助言お願い致します。
30
28
 
31
- Google Chrome ver.65
32
29
 
33
- Mac OS High Sierra 10.13.4
34
30
 
35
31
 
36
32
 
@@ -42,11 +38,13 @@
42
38
 
43
39
  <!DOCTYPE html>
44
40
 
41
+
42
+
45
43
  <head>
46
44
 
47
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
45
+ <meta charset="UTF-8">
48
46
 
49
- <script src="jquery-3.3.1.min.js"></script>
47
+ <script src="jquery-3.3.1.min.js"></script>
50
48
 
51
49
  </head>
52
50
 
@@ -54,19 +52,13 @@
54
52
 
55
53
  <body>
56
54
 
57
- <form>
55
+ <form>
58
56
 
59
- <input type="text" id="card_number1" maxlength="13" > <br>
57
+ <div id="jan_input"></div>
60
58
 
61
- <input type="text" id="card_number2" maxlength="13" > <br>
59
+ <input type="submit" value="送信">
62
60
 
63
- <input type="text" id="card_number3" maxlength="13" > <br>
64
-
65
- <input type="text" id="card_number4" maxlength="13" > <br>
66
-
67
- <input type="submit" value="送信">
68
-
69
- </form>
61
+ </form>
70
62
 
71
63
  </body>
72
64
 
@@ -76,21 +68,107 @@
76
68
 
77
69
  $(function(){
78
70
 
79
- var n=$('input[type=text][id^="card_number"]');
71
+
72
+
73
+ 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"];
74
+
75
+
76
+
77
+ var piyo = document.getElementById("jan_input");
78
+
79
+
80
+
81
+ jan_input = document.createElement("input");
82
+
83
+ br = document.createElement("br");
84
+
85
+ jan_input.setAttribute("type", "text");
86
+
87
+ jan_input.setAttribute("id", id_name[1]);
88
+
89
+ jan_input.setAttribute("maxlength", "13");
90
+
91
+ jan_input.appendChild(br);
92
+
93
+ piyo.appendChild(jan_input);
94
+
95
+ piyo.appendChild(br);
96
+
97
+
98
+
99
+ jan_input = document.createElement("input");
100
+
101
+ br = document.createElement("br");
102
+
103
+ jan_input.setAttribute("type", "text");
104
+
105
+ jan_input.setAttribute("id", id_name[2]);
106
+
107
+ jan_input.setAttribute("maxlength", "13");
108
+
109
+ jan_input.appendChild(br);
110
+
111
+ piyo.appendChild(jan_input);
112
+
113
+ piyo.appendChild(br);
114
+
115
+
116
+
117
+
118
+
119
+ var n=$('input[type=text][id^="card_number"]'); //最初のテキストボックスにフォーカスする
120
+
121
+
122
+
123
+ var i=3; // id_name[]の添字
124
+
125
+
80
126
 
81
127
  n.first().trigger('focus')
82
128
 
129
+
130
+
83
131
  .end().on('keyup',function() {
132
+
133
+
84
134
 
85
135
  var idx=n.index(this);
86
136
 
87
137
  var next_idx=idx>=n.length-1?0:idx+1;
88
138
 
139
+
140
+
89
141
  if($(this).val().length>=$(this).attr('maxlength')){
90
142
 
91
- $(this).attr('readonly',true);
143
+ $(this).attr('readonly',true); //13文字テキスト入力後、テキストボックスを読取り不可にする
92
144
 
145
+
146
+
147
+ jan_input = document.createElement("input");
148
+
149
+ br = document.createElement("br");
150
+
151
+ jan_input.setAttribute("type", "text");
152
+
153
+ jan_input.setAttribute("id", id_name[i]);
154
+
155
+ jan_input.setAttribute("maxlength", "13");
156
+
157
+ jan_input.appendChild(br);
158
+
159
+ piyo.appendChild(jan_input);
160
+
161
+ piyo.appendChild(br);
162
+
163
+
164
+
165
+ i++;
166
+
167
+
168
+
93
- n.eq(next_idx).trigger('focus');
169
+ n.eq(next_idx).trigger('focus'); //次のテキストボックスへフォーカス
170
+
171
+
94
172
 
95
173
  };
96
174
 

2

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

2018/04/03 05:44

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -56,13 +56,13 @@
56
56
 
57
57
  <form>
58
58
 
59
- <input type="text" id="card_number1" maxlength="13"> <br>
59
+ <input type="text" id="card_number1" maxlength="13" > <br>
60
60
 
61
- <input type="text" id="card_number2" maxlength="13"> <br>
61
+ <input type="text" id="card_number2" maxlength="13" > <br>
62
62
 
63
- <input type="text" id="card_number3" maxlength="13"> <br>
63
+ <input type="text" id="card_number3" maxlength="13" > <br>
64
64
 
65
- <input type="text" id="card_number4" maxlength="13"> <br>
65
+ <input type="text" id="card_number4" maxlength="13" > <br>
66
66
 
67
67
  <input type="submit" value="送信">
68
68
 
@@ -88,6 +88,8 @@
88
88
 
89
89
  if($(this).val().length>=$(this).attr('maxlength')){
90
90
 
91
+ $(this).attr('readonly',true);
92
+
91
93
  n.eq(next_idx).trigger('focus');
92
94
 
93
95
  };
@@ -102,6 +104,4 @@
102
104
 
103
105
  </html>
104
106
 
105
-
106
-
107
107
  ```

1

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

2018/04/02 09:02

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  現在のソースではあらかじめテキストボックス用意してカーソルをフォーカスしておりますが、
14
14
 
15
- テキストボックスに13文字文字を入力すると別のテキストボックスが自動生成され、そのテキストボックスにフォーカスする仕様にしたいと考えています。
15
+ テキストボックスに13文字文字を入力すると、別のテキストボックスが改行されて自動生成され、そのテキストボックスにフォーカスする仕様にしたいと考えています。
16
16
 
17
17
 
18
18