矢印keydownでfocusを使うとcaretの位置がずれる

前提・実現したいこと

矢印キー(left, right)を使うことでinput要素間を移動したいのですが
おそらく移動をしたinputで矢印キーが反応してしまいcaretの位置がずれてしまいます。

以下のコードは文字が入力されているときは矢印キーは通常の文字の間を移動しますが文字列の端にcaretがいてそれ以上に矢印キーが押されたとき横のinput要素にcaretを移動するというものです。
しかし移動した先に文字が表示されている場合、移動先でさらに矢印キーが反応しcaratが端に来ません。select()などを使った場合も同様です。

この問題を解決する方法はあるのでしょうか。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="utf-8">
5		<title>Sample</title>
6	</head>
7	<body>
8		<h1 id="tc">Sample</h1>
9		<div class="menu">
10			<div>
11				<input id="js-ipaddr-1" class="ipaddr ipaddr-ip"><span class="centering">.</span>
12				<input id="js-ipaddr-2" class="ipaddr ipaddr-ip"><span class="centering">.</span>
13				<input id="js-ipaddr-3" class="ipaddr ipaddr-ip"><span class="centering">.</span>
14				<input id="js-ipaddr-4" class="ipaddr ipaddr-ip"><span class="centering">/</span>
15				<input id="js-ipaddr-5" class="ipaddr ipaddr-subnet">
16			</div>
17			<div><input type="button" id="js-snd" class="bttn-snd" value="Send"></div>
18		</div>
19		<script type="text/javascript" src="js.js"></script>
20	</body>
21</html>

JavaScript
1var hoge =
2{
3	IPAddressManagement: function(ip_1, ip_2, ip_3, ip_4, sn)
4	{
5		window.alert("Called");
6		let obj_ip_1 = document.getElementById(ip_1);
7		let obj_ip_2 = document.getElementById(ip_2);
8		let obj_ip_3 = document.getElementById(ip_3);
9		let obj_ip_4 = document.getElementById(ip_4);
10		let obj_sn = document.getElementById(sn);
11		
12		function ShiftArrow(input_key, left, now, right)
13		{
14			console.log("pushed : ", input_key);
15			switch(input_key.keyCode)
16			{
17				case 37:
18					if(left !== null)if((now.selectionStart === now.selectionEnd) && (now.selectionEnd === 0)){ left.focus(); }
19					break;
20					
21				case 39:
22					if(right !== null)if((now.selectionStart === now.selectionEnd) && (now.selectionEnd === (now.value.length))){ right.focus(); }
23					break;
24			}
25		}
26		
27		obj_ip_1.onkeydown = (press_key) => ShiftArrow(press_key, null, obj_ip_1, obj_ip_2);
28		obj_ip_2.onkeydown = (press_key) => ShiftArrow(press_key, obj_ip_1, obj_ip_2, obj_ip_3);
29		obj_ip_3.onkeydown = (press_key) => ShiftArrow(press_key, obj_ip_2, obj_ip_3, obj_ip_4);
30		obj_ip_4.onkeydown = (press_key) => ShiftArrow(press_key, obj_ip_3, obj_ip_4, obj_sn);
31		obj_sn.onkeydown = (press_key) => ShiftArrow(press_key, obj_ip_4, obj_sn, null);
32		
33		return;
34	}
35	
36
37}
38
39
40hoge.IPAddressManagement('js-ipaddr-1', 'js-ipaddr-2', 'js-ipaddr-3', 'js-ipaddr-4', 'js-ipaddr-5');
41

補足情報

Windows10 Pro
Chrome

行動規範の内容に同意します

回答1件

ベストアンサー

focus()の前に preventDefault()を入れるというのはどうでしょうか。

js
1var hoge = {
2  IPAddressManagement: function (ip_1, ip_2, ip_3, ip_4, sn) {
3    window.alert("Called");
4    let obj_ip_1 = document.getElementById(ip_1);
5    let obj_ip_2 = document.getElementById(ip_2);
6    let obj_ip_3 = document.getElementById(ip_3);
7    let obj_ip_4 = document.getElementById(ip_4);
8    let obj_sn = document.getElementById(sn);
9
10    function ShiftArrow(input_key, left, now, right) {
11      console.log("pushed : ", input_key);
12      switch (input_key.keyCode) {
13        case 37:
14          if (left !== null)
15            if (now.selectionStart === now.selectionEnd && now.selectionEnd === 0) {
16              input_key.preventDefault();
17              left.focus();
18            }
19          break;
20
21        case 39:
22          if (right !== null)
23            if (now.selectionStart === now.selectionEnd &&  now.selectionEnd === now.value.length) {
24              input_key.preventDefault();
25              right.focus();
26            }
27          break;
28      }
29    }
30
31    obj_ip_1.onkeydown = (press_key) =>
32      ShiftArrow(press_key, null, obj_ip_1, obj_ip_2);
33    obj_ip_2.onkeydown = (press_key) =>
34      ShiftArrow(press_key, obj_ip_1, obj_ip_2, obj_ip_3);
35    obj_ip_3.onkeydown = (press_key) =>
36      ShiftArrow(press_key, obj_ip_2, obj_ip_3, obj_ip_4);
37    obj_ip_4.onkeydown = (press_key) =>
38      ShiftArrow(press_key, obj_ip_3, obj_ip_4, obj_sn);
39    obj_sn.onkeydown = (press_key) =>
40      ShiftArrow(press_key, obj_ip_4, obj_sn, null);
41  },
42};
43
44hoge.IPAddressManagement(
45  "js-ipaddr-1",
46  "js-ipaddr-2",
47  "js-ipaddr-3",
48  "js-ipaddr-4",
49  "js-ipaddr-5"
50);
51

コードをより汎用的なものにするなら以下のようになるかもしれません。

js
1const hoge = {
2  IPAddressManagement: (inputs) => {
3    // window.alert("Called");
4    const ShiftArrow = (input_key, left, now, right) => {
5      // console.log("pushed : ", input_key);
6      switch (input_key.keyCode) {
7        case 37:
8          if (left !== null)
9            if (now.selectionStart === now.selectionEnd && now.selectionEnd === 0) {
10              input_key.preventDefault();
11              left.focus();
12            }
13          break;
14
15        case 39:
16          if (right !== null)
17            if (now.selectionStart === now.selectionEnd && now.selectionEnd === now.value.length) {
18              input_key.preventDefault();
19              right.focus();
20            }
21          break;
22      }
23    };
24
25    const objs = inputs.map((e) => document.getElementById(e));
26    const dists = [null, ...objs, null];
27
28    objs.forEach((obj, i) => {
29      obj.onkeydown = (press_key) => {
30        ShiftArrow(press_key, dists[i], dists[i + 1], dists[i + 2]);
31      };
32    });
33  },
34};
35
36hoge.IPAddressManagement([
37  "js-ipaddr-1",
38  "js-ipaddr-2",
39  "js-ipaddr-3",
40  "js-ipaddr-4",
41  "js-ipaddr-5",
42]);
43