teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問矢印keydownでfocusを使うとcaretの位置がずれる

編集履歴

回答編集履歴

1

修正

2021/04/20 21:58

投稿

退会済みユーザー
test CHANGED
@@ -1,28 +1,126 @@
1
1
  focus()の前に preventDefault()を入れるというのはどうでしょうか。
2
2
 
3
+ ```js
4
+
5
+ var hoge = {
6
+
7
+ IPAddressManagement: function (ip_1, ip_2, ip_3, ip_4, sn) {
8
+
9
+ window.alert("Called");
10
+
11
+ let obj_ip_1 = document.getElementById(ip_1);
12
+
13
+ let obj_ip_2 = document.getElementById(ip_2);
14
+
15
+ let obj_ip_3 = document.getElementById(ip_3);
16
+
17
+ let obj_ip_4 = document.getElementById(ip_4);
18
+
19
+ let obj_sn = document.getElementById(sn);
20
+
21
+
22
+
23
+ function ShiftArrow(input_key, left, now, right) {
24
+
25
+ console.log("pushed : ", input_key);
26
+
27
+ switch (input_key.keyCode) {
28
+
29
+ case 37:
30
+
31
+ if (left !== null)
32
+
33
+ if (now.selectionStart === now.selectionEnd && now.selectionEnd === 0) {
34
+
35
+ input_key.preventDefault();
36
+
37
+ left.focus();
38
+
39
+ }
40
+
41
+ break;
42
+
43
+
44
+
45
+ case 39:
46
+
47
+ if (right !== null)
48
+
49
+ if (now.selectionStart === now.selectionEnd && now.selectionEnd === now.value.length) {
50
+
51
+ input_key.preventDefault();
52
+
53
+ right.focus();
54
+
55
+ }
56
+
57
+ break;
58
+
59
+ }
60
+
61
+ }
62
+
63
+
64
+
65
+ obj_ip_1.onkeydown = (press_key) =>
66
+
67
+ ShiftArrow(press_key, null, obj_ip_1, obj_ip_2);
68
+
69
+ obj_ip_2.onkeydown = (press_key) =>
70
+
71
+ ShiftArrow(press_key, obj_ip_1, obj_ip_2, obj_ip_3);
72
+
73
+ obj_ip_3.onkeydown = (press_key) =>
74
+
75
+ ShiftArrow(press_key, obj_ip_2, obj_ip_3, obj_ip_4);
76
+
77
+ obj_ip_4.onkeydown = (press_key) =>
78
+
79
+ ShiftArrow(press_key, obj_ip_3, obj_ip_4, obj_sn);
80
+
81
+ obj_sn.onkeydown = (press_key) =>
82
+
83
+ ShiftArrow(press_key, obj_ip_4, obj_sn, null);
84
+
85
+ },
86
+
87
+ };
88
+
89
+
90
+
91
+ hoge.IPAddressManagement(
92
+
93
+ "js-ipaddr-1",
94
+
95
+ "js-ipaddr-2",
96
+
97
+ "js-ipaddr-3",
98
+
99
+ "js-ipaddr-4",
100
+
101
+ "js-ipaddr-5"
102
+
103
+ );
104
+
105
+
106
+
3
107
  ```
4
108
 
109
+
110
+
111
+ コードをより汎用的なものにするなら以下のようになるかもしれません。
112
+
113
+ ```js
114
+
5
- var hoge = {
115
+ const hoge = {
6
-
116
+
7
- IPAddressManagement: function (ip_1, ip_2, ip_3, ip_4, sn) {
117
+ IPAddressManagement: (inputs) => {
8
-
118
+
9
- window.alert("Called");
119
+ // window.alert("Called");
10
-
11
- let obj_ip_1 = document.getElementById(ip_1);
120
+
12
-
13
- let obj_ip_2 = document.getElementById(ip_2);
14
-
15
- let obj_ip_3 = document.getElementById(ip_3);
16
-
17
- let obj_ip_4 = document.getElementById(ip_4);
18
-
19
- let obj_sn = document.getElementById(sn);
20
-
21
-
22
-
23
- function ShiftArrow(input_key, left, now, right) {
121
+ const ShiftArrow = (input_key, left, now, right) => {
24
-
122
+
25
- console.log("pushed : ", input_key);
123
+ // console.log("pushed : ", input_key);
26
124
 
27
125
  switch (input_key.keyCode) {
28
126
 
@@ -46,7 +144,7 @@
46
144
 
47
145
  if (right !== null)
48
146
 
49
- if (now.selectionStart === now.selectionEnd && now.selectionEnd === now.value.length) {
147
+ if (now.selectionStart === now.selectionEnd && now.selectionEnd === now.value.length) {
50
148
 
51
149
  input_key.preventDefault();
52
150
 
@@ -58,29 +156,25 @@
58
156
 
59
157
  }
60
158
 
61
- }
159
+ };
160
+
161
+
162
+
62
-
163
+ const objs = inputs.map((e) => document.getElementById(e));
164
+
63
-
165
+ const dists = [null, ...objs, null];
64
-
166
+
167
+
168
+
65
- obj_ip_1.onkeydown = (press_key) =>
169
+ objs.forEach((obj, i) => {
66
-
67
- ShiftArrow(press_key, null, obj_ip_1, obj_ip_2);
170
+
68
-
69
- obj_ip_2.onkeydown = (press_key) =>
70
-
71
- ShiftArrow(press_key, obj_ip_1, obj_ip_2, obj_ip_3);
72
-
73
- obj_ip_3.onkeydown = (press_key) =>
74
-
75
- ShiftArrow(press_key, obj_ip_2, obj_ip_3, obj_ip_4);
76
-
77
- obj_ip_4.onkeydown = (press_key) =>
78
-
79
- ShiftArrow(press_key, obj_ip_3, obj_ip_4, obj_sn);
80
-
81
- obj_sn.onkeydown = (press_key) =>
171
+ obj.onkeydown = (press_key) => {
82
-
172
+
83
- ShiftArrow(press_key, obj_ip_4, obj_sn, null);
173
+ ShiftArrow(press_key, dists[i], dists[i + 1], dists[i + 2]);
174
+
175
+ };
176
+
177
+ });
84
178
 
85
179
  },
86
180
 
@@ -88,7 +182,7 @@
88
182
 
89
183
 
90
184
 
91
- hoge.IPAddressManagement(
185
+ hoge.IPAddressManagement([
92
186
 
93
187
  "js-ipaddr-1",
94
188
 
@@ -98,106 +192,10 @@
98
192
 
99
193
  "js-ipaddr-4",
100
194
 
101
- "js-ipaddr-5"
195
+ "js-ipaddr-5",
102
-
196
+
103
- );
197
+ ]);
104
198
 
105
199
 
106
200
 
107
201
  ```
108
-
109
-
110
-
111
- コードをより汎用的なものにするなら以下のようになるかもしれません。
112
-
113
- ```
114
-
115
- const hoge = {
116
-
117
- IPAddressManagement: function (inputs) {
118
-
119
- // window.alert("Called");
120
-
121
- const objs = inputs.map((e) => document.getElementById(e));
122
-
123
-
124
-
125
- const ShiftArrow = (input_key, left, now, right) => {
126
-
127
- // console.log("pushed : ", input_key);
128
-
129
- switch (input_key.keyCode) {
130
-
131
- case 37:
132
-
133
- if (left !== null)
134
-
135
- if (now.selectionStart === now.selectionEnd && now.selectionEnd === 0) {
136
-
137
- input_key.preventDefault();
138
-
139
- left.focus();
140
-
141
- }
142
-
143
- break;
144
-
145
-
146
-
147
- case 39:
148
-
149
- if (right !== null)
150
-
151
- if (now.selectionStart === now.selectionEnd && now.selectionEnd === now.value.length) {
152
-
153
- input_key.preventDefault();
154
-
155
- right.focus();
156
-
157
- }
158
-
159
- break;
160
-
161
- }
162
-
163
- };
164
-
165
-
166
-
167
- dists = [null, ...objs, null];
168
-
169
-
170
-
171
- objs.forEach((obj, i) => {
172
-
173
- obj.onkeydown = (press_key) => {
174
-
175
- ShiftArrow(press_key, dists[i], dists[i + 1], dists[i + 2]);
176
-
177
- };
178
-
179
- });
180
-
181
- },
182
-
183
- };
184
-
185
-
186
-
187
- hoge.IPAddressManagement([
188
-
189
- "js-ipaddr-1",
190
-
191
- "js-ipaddr-2",
192
-
193
- "js-ipaddr-3",
194
-
195
- "js-ipaddr-4",
196
-
197
- "js-ipaddr-5",
198
-
199
- ]);
200
-
201
-
202
-
203
- ```