JavaScript - 指定文字数に達したらフォーカスを自動で切り替える

JavaScriptでフォーム入力時に指定文字数に達したらフォーカスを自動で次のフォームパーツに切り替える方法とコード例を作成しています。

HTMLには、複数のテキストフォームにクラス名「text_form」を指定して処理しています。

<div class="item-container">
	<p>フォーカスは自動で移動します。</p>
	<input type="text" class="text_form" maxlength="4" value="">
	<input type="text" class="text_form" maxlength="4" value="">
	<input type="text" class="text_form" maxlength="4" value="">
	<input type="text" class="text_form" maxlength="4" value="">
</div>

対象とするテキストフォーム要素をまとめてquerySelectorAll()で取得しています。

各フォームにaddEventListener()で入力イベントを実装し、現在の入力文字数とHTML属性で指定している「maxlength」を参照、比較して超えていれば次のフォームに移動します。

また最後のフォームだった場合、フォーカスを外しています。

// 対象のテキストフォームをすべて取得する
let text_forms = document.querySelectorAll('.text_form');

for (const [index, text_form] of text_forms.entries()) {

	text_form.addEventListener('input', () => {
		// maxlengthに達したかどうか
		if(text_form.value.length >= text_form.maxLength) {
			// 次のフォームがあるかどうか
			if(text_forms[index + 1]) {
				// 次のフォームをフォーカスする
				text_forms[index + 1].focus();
			}else{
				// フォーカスを外す
				text_forms[index].blur();
			}
		}
	}, false);

}