teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問Js特定の要素にフォーカス移動する

編集履歴

回答編集履歴

3

:enabled なfocus可能要素にfocusするように修正

2021/02/28 12:21

投稿

think49
think49

スコア18194

test CHANGED
@@ -108,7 +108,7 @@
108
108
 
109
109
 
110
110
 
111
- - [Enterキーでfocus移動 (.focusable 限定版) - JSFiddle](https://jsfiddle.net/bv0rdtcg/1/)
111
+ - [Enterキーでfocus移動 (.focusable 限定版) - JSFiddle - Code Playground](https://jsfiddle.net/bv0rdtcg/2/)
112
112
 
113
113
 
114
114
 
@@ -126,7 +126,7 @@
126
126
 
127
127
  <input type="checkbox" name="c2" /><br>
128
128
 
129
- <input class="focusable" type="text" name="c" /><br>
129
+ <input class="focusable" type="text" name="c" disabled /><br>
130
130
 
131
131
  <input class="focusable" type="text" name="d" /><br>
132
132
 
@@ -146,11 +146,13 @@
146
146
 
147
147
 
148
148
 
149
- const
150
-
151
- targets = document.getElementsByClassName('focusable'),
149
+ const targets = document.getElementsByClassName('focusable');
152
-
150
+
153
- nextInput = targets[Array.prototype.indexOf.call(targets, input) + 1];
151
+ let i = Array.prototype.indexOf.call(targets, input), nextInput;
152
+
153
+
154
+
155
+ while (nextInput = targets[++i], nextInput && nextInput.disabled);
154
156
 
155
157
 
156
158
 
@@ -174,7 +176,7 @@
174
176
 
175
177
  <input type="checkbox" name="c2" /><br>
176
178
 
177
- <input class="focusable" type="text" name="c" /><br>
179
+ <input class="focusable" type="text" name="c" disabled /><br>
178
180
 
179
181
  <input class="focusable" type="text" name="d" /><br>
180
182
 
@@ -194,7 +196,7 @@
194
196
 
195
197
 
196
198
 
197
- const nextInput = input.form.querySelector('.focusable:focus~.focusable');
199
+ const nextInput = input.form.querySelector('.focusable:focus~.focusable:enabled');
198
200
 
199
201
 
200
202
 

2

Enterキーでfocus移動 (.focusable 限定版) - JSFiddle

2021/02/28 12:21

投稿

think49
think49

スコア18194

test CHANGED
@@ -50,6 +50,14 @@
50
50
 
51
51
 
52
52
 
53
+ ### 実装例
54
+
55
+
56
+
57
+ - [Enterキーでfocus移動 (input[type=text] 限定ver - JSFiddle](https://jsfiddle.net/bv0rdtcg/)
58
+
59
+
60
+
53
61
  ```HTML
54
62
 
55
63
  <form id="hoge" action="test.php">
@@ -96,4 +104,108 @@
96
104
 
97
105
 
98
106
 
107
+ ---
108
+
109
+
110
+
111
+ - [Enterキーでfocus移動 (.focusable 限定版) - JSFiddle](https://jsfiddle.net/bv0rdtcg/1/)
112
+
113
+
114
+
115
+ ```HTML
116
+
117
+ <h2>getElementsByClassName() ver</h2>
118
+
119
+ <form id="sample1" action="test.php">
120
+
121
+ <input class="focusable" type="text" name="a" /><br>
122
+
123
+ <input type="checkbox" name="c1" /><br>
124
+
125
+ <input class="focusable" type="text" name="b" /><br>
126
+
127
+ <input type="checkbox" name="c2" /><br>
128
+
129
+ <input class="focusable" type="text" name="c" /><br>
130
+
131
+ <input class="focusable" type="text" name="d" /><br>
132
+
133
+ <input class="focusable" type="text" name="e" /><br>
134
+
135
+ </form>
136
+
137
+ <script>
138
+
139
+ document.getElementById('sample1').addEventListener('keydown', function handleKeydown (event) {
140
+
141
+ const input = event.target;
142
+
143
+
144
+
145
+ if (event.code !== 'Enter' || input.tagName !== 'INPUT' || input.type !== 'text') return;
146
+
147
+
148
+
149
+ const
150
+
151
+ targets = document.getElementsByClassName('focusable'),
152
+
153
+ nextInput = targets[Array.prototype.indexOf.call(targets, input) + 1];
154
+
155
+
156
+
157
+ if (nextInput) nextInput.focus();
158
+
159
+ }, false);
160
+
161
+ </script>
162
+
163
+
164
+
165
+ <h2>querySelectorAll() ver</h2>
166
+
167
+ <form id="sample2" action="test.php">
168
+
169
+ <input class="focusable" type="text" name="a" /><br>
170
+
171
+ <input type="checkbox" name="c1" /><br>
172
+
173
+ <input class="focusable" type="text" name="b" /><br>
174
+
175
+ <input type="checkbox" name="c2" /><br>
176
+
177
+ <input class="focusable" type="text" name="c" /><br>
178
+
179
+ <input class="focusable" type="text" name="d" /><br>
180
+
181
+ <input class="focusable" type="text" name="e" /><br>
182
+
183
+ </form>
184
+
185
+ <script>
186
+
187
+ document.getElementById('sample2').addEventListener('keydown', function handleKeydown (event) {
188
+
189
+ const input = event.target;
190
+
191
+
192
+
193
+ if (event.code !== 'Enter' || input.tagName !== 'INPUT' || input.type !== 'text') return;
194
+
195
+
196
+
197
+ const nextInput = input.form.querySelector('.focusable:focus~.focusable');
198
+
199
+
200
+
201
+ if (nextInput) nextInput.focus();
202
+
203
+ }, false);
204
+
205
+ </script>
206
+
207
+ ```
208
+
209
+
210
+
99
211
  Re: ryooma さん

1

サンプルコード追加

2021/02/28 11:57

投稿

think49
think49

スコア18194

test CHANGED
@@ -46,7 +46,53 @@
46
46
 
47
47
  - `nextElementSibling` を while 文で `<input type="text">` がくるまで繰り返す
48
48
 
49
- - 親ノードから `querySelectorAll()` で `input:focus+input[type=text]`
49
+ - 親ノードから `querySelectorAll()` で `input:focus~input[type=text]`
50
+
51
+
52
+
53
+ ```HTML
54
+
55
+ <form id="hoge" action="test.php">
56
+
57
+ <input type="text" name="a" /><br>
58
+
59
+ <input type="checkbox" name="c1" /><br>
60
+
61
+ <input type="text" name="b" /><br>
62
+
63
+ <input type="checkbox" name="c2" /><br>
64
+
65
+ <input type="text" name="c" /><br>
66
+
67
+ <input type="text" name="d" /><br>
68
+
69
+ <input type="text" name="e" /><br>
70
+
71
+ </form>
72
+
73
+ <script>
74
+
75
+ document.getElementById('hoge').addEventListener('keydown', function handleKeydown (event) {
76
+
77
+ var input = event.target;
78
+
79
+
80
+
81
+ if (event.code !== 'Enter' || input.tagName !== 'INPUT' || input.type !== 'text') return;
82
+
83
+
84
+
85
+ var nextInput = input.form.querySelector('input:focus~input[type=text]');
86
+
87
+
88
+
89
+ if (nextInput) nextInput.focus();
90
+
91
+ }, false);
92
+
93
+ </script>
94
+
95
+ ```
50
96
 
51
97
 
52
98