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

編集履歴

回答編集履歴

3

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

2021/02/28 12:21

投稿

think49
think49

スコア18194

answer CHANGED
@@ -53,7 +53,7 @@
53
53
 
54
54
  ---
55
55
 
56
- - [Enterキーでfocus移動 (.focusable 限定版) - JSFiddle](https://jsfiddle.net/bv0rdtcg/1/)
56
+ - [Enterキーでfocus移動 (.focusable 限定版) - JSFiddle - Code Playground](https://jsfiddle.net/bv0rdtcg/2/)
57
57
 
58
58
  ```HTML
59
59
  <h2>getElementsByClassName() ver</h2>
@@ -62,7 +62,7 @@
62
62
  <input type="checkbox" name="c1" /><br>
63
63
  <input class="focusable" type="text" name="b" /><br>
64
64
  <input type="checkbox" name="c2" /><br>
65
- <input class="focusable" type="text" name="c" /><br>
65
+ <input class="focusable" type="text" name="c" disabled /><br>
66
66
  <input class="focusable" type="text" name="d" /><br>
67
67
  <input class="focusable" type="text" name="e" /><br>
68
68
  </form>
@@ -72,10 +72,11 @@
72
72
 
73
73
  if (event.code !== 'Enter' || input.tagName !== 'INPUT' || input.type !== 'text') return;
74
74
 
75
- const
76
- targets = document.getElementsByClassName('focusable'),
75
+ const targets = document.getElementsByClassName('focusable');
77
- nextInput = targets[Array.prototype.indexOf.call(targets, input) + 1];
76
+ let i = Array.prototype.indexOf.call(targets, input), nextInput;
78
77
 
78
+ while (nextInput = targets[++i], nextInput && nextInput.disabled);
79
+
79
80
  if (nextInput) nextInput.focus();
80
81
  }, false);
81
82
  </script>
@@ -86,7 +87,7 @@
86
87
  <input type="checkbox" name="c1" /><br>
87
88
  <input class="focusable" type="text" name="b" /><br>
88
89
  <input type="checkbox" name="c2" /><br>
89
- <input class="focusable" type="text" name="c" /><br>
90
+ <input class="focusable" type="text" name="c" disabled /><br>
90
91
  <input class="focusable" type="text" name="d" /><br>
91
92
  <input class="focusable" type="text" name="e" /><br>
92
93
  </form>
@@ -96,7 +97,7 @@
96
97
 
97
98
  if (event.code !== 'Enter' || input.tagName !== 'INPUT' || input.type !== 'text') return;
98
99
 
99
- const nextInput = input.form.querySelector('.focusable:focus~.focusable');
100
+ const nextInput = input.form.querySelector('.focusable:focus~.focusable:enabled');
100
101
 
101
102
  if (nextInput) nextInput.focus();
102
103
  }, false);

2

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

2021/02/28 12:21

投稿

think49
think49

スコア18194

answer CHANGED
@@ -24,6 +24,10 @@
24
24
  - `nextElementSibling` を while 文で `<input type="text">` がくるまで繰り返す
25
25
  - 親ノードから `querySelectorAll()` で `input:focus~input[type=text]`
26
26
 
27
+ ### 実装例
28
+
29
+ - [Enterキーでfocus移動 (input[type=text] 限定ver - JSFiddle](https://jsfiddle.net/bv0rdtcg/)
30
+
27
31
  ```HTML
28
32
  <form id="hoge" action="test.php">
29
33
  <input type="text" name="a" /><br>
@@ -47,4 +51,56 @@
47
51
  </script>
48
52
  ```
49
53
 
54
+ ---
55
+
56
+ - [Enterキーでfocus移動 (.focusable 限定版) - JSFiddle](https://jsfiddle.net/bv0rdtcg/1/)
57
+
58
+ ```HTML
59
+ <h2>getElementsByClassName() ver</h2>
60
+ <form id="sample1" action="test.php">
61
+ <input class="focusable" type="text" name="a" /><br>
62
+ <input type="checkbox" name="c1" /><br>
63
+ <input class="focusable" type="text" name="b" /><br>
64
+ <input type="checkbox" name="c2" /><br>
65
+ <input class="focusable" type="text" name="c" /><br>
66
+ <input class="focusable" type="text" name="d" /><br>
67
+ <input class="focusable" type="text" name="e" /><br>
68
+ </form>
69
+ <script>
70
+ document.getElementById('sample1').addEventListener('keydown', function handleKeydown (event) {
71
+ const input = event.target;
72
+
73
+ if (event.code !== 'Enter' || input.tagName !== 'INPUT' || input.type !== 'text') return;
74
+
75
+ const
76
+ targets = document.getElementsByClassName('focusable'),
77
+ nextInput = targets[Array.prototype.indexOf.call(targets, input) + 1];
78
+
79
+ if (nextInput) nextInput.focus();
80
+ }, false);
81
+ </script>
82
+
83
+ <h2>querySelectorAll() ver</h2>
84
+ <form id="sample2" action="test.php">
85
+ <input class="focusable" type="text" name="a" /><br>
86
+ <input type="checkbox" name="c1" /><br>
87
+ <input class="focusable" type="text" name="b" /><br>
88
+ <input type="checkbox" name="c2" /><br>
89
+ <input class="focusable" type="text" name="c" /><br>
90
+ <input class="focusable" type="text" name="d" /><br>
91
+ <input class="focusable" type="text" name="e" /><br>
92
+ </form>
93
+ <script>
94
+ document.getElementById('sample2').addEventListener('keydown', function handleKeydown (event) {
95
+ const input = event.target;
96
+
97
+ if (event.code !== 'Enter' || input.tagName !== 'INPUT' || input.type !== 'text') return;
98
+
99
+ const nextInput = input.form.querySelector('.focusable:focus~.focusable');
100
+
101
+ if (nextInput) nextInput.focus();
102
+ }, false);
103
+ </script>
104
+ ```
105
+
50
106
  Re: ryooma さん

1

サンプルコード追加

2021/02/28 11:57

投稿

think49
think49

スコア18194

answer CHANGED
@@ -22,6 +22,29 @@
22
22
  二通りの解決手段。
23
23
 
24
24
  - `nextElementSibling` を while 文で `<input type="text">` がくるまで繰り返す
25
- - 親ノードから `querySelectorAll()` で `input:focus+input[type=text]`
25
+ - 親ノードから `querySelectorAll()` で `input:focus~input[type=text]`
26
26
 
27
+ ```HTML
28
+ <form id="hoge" action="test.php">
29
+ <input type="text" name="a" /><br>
30
+ <input type="checkbox" name="c1" /><br>
31
+ <input type="text" name="b" /><br>
32
+ <input type="checkbox" name="c2" /><br>
33
+ <input type="text" name="c" /><br>
34
+ <input type="text" name="d" /><br>
35
+ <input type="text" name="e" /><br>
36
+ </form>
37
+ <script>
38
+ document.getElementById('hoge').addEventListener('keydown', function handleKeydown (event) {
39
+ var input = event.target;
40
+
41
+ if (event.code !== 'Enter' || input.tagName !== 'INPUT' || input.type !== 'text') return;
42
+
43
+ var nextInput = input.form.querySelector('input:focus~input[type=text]');
44
+
45
+ if (nextInput) nextInput.focus();
46
+ }, false);
47
+ </script>
48
+ ```
49
+
27
50
  Re: ryooma さん