[JavaScript] フォーム内で自動フォーカス移動を行う

投稿日：2016年11月28日更新日：2018年5月2日

テキストボックスに最大文字数の入力がされたら、自動で次のフォーム部品へ移動するサンプルです。

自動フォーカス移動

例）最大文字数入力すると自動で次の要素へフォーカス移動する

function setNextFocus(obj){
  if(obj.value.length >= obj.maxLength){
    var es = document.fm1.elements;
    for(var i=0;i<es.length;i++){
      if(es[i] == obj){
        es[i+1].focus();
        break;
      }
    }
  }
}

function setNextFocus(obj){

if(obj.value.length >= obj.maxLength){

var es = document.fm1.elements;

for(var i=0;i<es.length;i++){

if(es[i] == obj){

es[i+1].focus();

break;

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <form name="fm1">
    <input type="text" id="txt1" maxlength="4" onkeyup="setNextFocus(this)" />
    <input type="text" id="txt2" maxlength="4" onkeyup="setNextFocus(this)" />
    <input type="text" id="txt3" maxlength="4" onkeyup="setNextFocus(this)" />
    <input type="text" id="txt4" maxlength="4" onkeyup="setNextFocus(this)" />
    <input type="button" value=" ボタン " onclick="alert('入力が完了しました！');" />
  </form>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</form>

</body>

</html>

実行サンプル

それぞれ４文字入力すると自動で次のテキストボックスへ移動します。
（クレジットカード番号入力を想定しています。）

解説

テキストボックス以外の要素でもOKです。
ただしmaxlengthが無い要素（ラジオボタンなど）ではフォーカス移動しません。