TABLE中のInputボックスをEnterや矢印キーで移動したい

Question

javascriptでのDOM操作についてお尋ねします。

以下のような表の中に配置した入力ボックスがあるとします。

<table>
<tr>
 <td>
  <input type="text"  name="cell_1_1" onkeydown="keydown()">
 </td>
 <td>
  <input type="text"  name="cell_1_1" onkeydown="keydown()">
 </td>
</tr>
</table>

この表において、入力ボックスでEnterを押したときに隣の入力ボックスに移動させたいのですが、
Input要素同士が兄弟ではないため、以下の書き方だと移動できません。
nextElementSiblingは、nullとなります。

	function keydown(e){
	   if(e.code === "Enter"){
	      var obj = document.activeElement;
 	      obj.nextElementSibling.focus();
			  }
	}

こういう場合、どう書けばよいのでしょうか？

Answer 1

<script>
document.addEventListener('keydown',e=>{
  var t=e.target;
  if(t.closest('input') && e.key.match(/enter/i)){
    e.preventDefault();
    var ele=[...document.querySelectorAll('[type=text]')];
    var idx=ele.indexOf(t);
    ele[(ele.length<=idx+1)?0:idx+1].focus(); 
  }
});
</script>
<form>
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
<input type="submit" value="send">
</form>

Comments

[radicalfree]

@yambejp 様
ご回答ありがとうございました。
ご提案の方法でもできました。

Answer 2

テーブル内の<input>をリスト化して、現在の<input>を探して、その次にfocus()するのはいかがでしょうか。

let inputList = [...document.activeElement.closest('table').querySelectorAll('input')];
inputList[inputList.indexOf(document.activeElement) + 1].focus();

Comments

[radicalfree]

@int32_t 様
ご回答ありがとうございます。

ブラウザを再起動したら

`Uncaught TypeError: Cannot read property 'code' of undefin`

が出るようになってしまって、ご提案の方法を試すに至っておりません。

`...document.activeElement.`
についてですが、先頭の...（ピリオド三つ）の意味は何でしょうか？

[int32_t]

> `Uncaught TypeError: Cannot read property 'code' of undefin`

このエラーはこの回答とは関係なさそうです。

> 先頭の...（ピリオド三つ）の意味は何でしょうか？

スプレッド構文です。querySelectorAll()の戻り値が配列ではないオブジェクトなので、配列に変換する意図です。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

[radicalfree]

できました。ありがとうございました。