SUBMIT時のフォーカス位置を保持し、SUBMIT後に同じ位置にフォーカスしたい

Question

3行目の名前入力インプットにフォーカスされているときにエンターキーを押してSUBMITします。
SUBMIT後に同じ3行目の名前入力欄にフォーカスされる状態にしたいのですが、
調べたところ、javascriptの「Document.activeElement」を使用して要素の取得はできるようなのですが、
要素の位置を取得⇒SUBMIT後に同じ位置へフォーカスの仕方が分かりません。
ご教示宜しくお願い致します。

echo"
<form action='a.php' method='POST'>
<table>
<tr><th>名前</th><th>mail</th><th>tel</th></tr>
";
$i = 1;
while( $i < 5 ){
	echo"
	<tr>
	<td><input type='text' name='お名前' value='".$name[$i]."'></td>
	<td><input type='mail' name='Email' value='".$mail[$i]."'></td>
	<td><input type='text' name='TEL' value='".$tel[$i]."'></td>
	</tr>
	";
	$i++;
}
echo"
</table>
<input type='submit' value='保存'>
</form>
";

Comments

[m.ts10806]

ここでいう「要素」とは何のことになるのでしょう。

[test1234]

フォームのINPUT要素です。

[m.ts10806]

ループで作っているのと、ボタンあわせて10個以上あるはずですが。

Answer 1

何にフォーカスがあたっているか次のページにパラメータで渡して
それを利用してautofocus属性をつければよいということです
適当に・・・

<?PHP
$focus=["a"=>"","b"=>"","c"=>""];
$focus[filter_input(INPUT_GET,"focus")]=" autofocus";
?>
<script>
document.addEventListener('formdata',e=>{
  e.formData.append("focus",document.activeElement.name);
});
</script>
<form>
<input name="a" value="123"<?=$focus["a"]?>><br>
<input name="b" value="456"<?=$focus["b"]?>><br>
<input name="c" value="789"<?=$focus["c"]?>><br>
<input type="submit" value="send">
</form>

Comments

[test1234]

ありがとうございます！解決しました。