フォームのフォーカスを移動する

HTMLの属性を利用する

HTMLのautofocus属性を利用すると、ページが表示された時にフォーカスされた状態になります。以下は、例です。

<input type="text" autofocus>

autofocusはグローバル属性のため、select要素やbutton要素でも使えます。

autofocusをページの途中で使うと、フォーカスした要素までスクロールして表示されます。つまり、ページが表示された時に説明が飛ばされて、いきなり入力になったりするため、留意が必要です。

focusメソッドを使う方法

JavaScriptのfocusメソッドを使っても、ページが表示された時に自動でフォーカスさせることができます。

<input type="text" id="test1">
<script>
const x = document.querySelector("#test1");
x.focus();
</script>

この方法もautofocus属性と同じで、ページの途中で使うとフォーカスした要素までスクロールして表示されます。

スクロールさせたくない時は、以下のようにします。

<input type="text" id="test1">
<script>
const x = document.querySelector("#test1");
x.focus({preventScroll:true});
</script>

上記により、フォーカスはされますが、ページが表示された時に自動でスクロールはされません。

フォーカスを移動する

エンターキーを押すたびに、次のテキストボックスにフォーカスを移動させることもできます。

<form name="form1">
<input type="text" name="text1" class="test1">
<input type="text" name="text2" class="test1">
<input type="text" name="text3">
<input type="button" value="実行">
</form>

<script>
function func1(event) {
  if ( event.key === "Enter" ) {
    this.nextElementSibling.focus();
  }
}
const x = document.getElementsByClassName("test1");
x[0].addEventListener("keydown",func1);
x[1].addEventListener("keydown",func1);
</script>

keydownは、キーが押された時にfunc1を呼び出します。this.nextElementSibling.focus()で次の要素がフォーカスされます。thisがfunc1を呼び出したオブジェクトを示し、nextElementSiblingがそのオブジェクトの次の要素を示すためです。

実行例は、以下のとおりです。

最初のテキストボックスをクリックしてフォーカスした後、エンターキーを押すと次のテキストボックスがフォーカスされます。再度エンターキーを押すと、3つめのテキストボックスがフォーカスされます。

この方法は、ラジオボタンなどの他のフォームコントロールでも使えます。