JavaScript：エンターキーでフォーカス移動

サンプル

お名前 

同伴者 

プラン  Aプラン Bプラン

時間
15:00～
18:00～

利用規約に同意します。

申し込み

sample.html

<div>
<p><label>お名前<input class="inputs" type="text" name="mainname"/></label></p>
<p><label>同伴者<input class="inputs" type="text" name="subname" tabindex="99"/></label></p>
<p><label>プラン<select class="inputs" name="plan">
<option value="A">Aプラン</option>
<option value="B">Bプラン</option>
</select></label></p>
<p>時間<br>
<label><input class="inputs"  type="radio" name="hour" value="15">15:00～</label><br>
<label><input class="inputs" type="radio" name="hour" value="18" tabindex="-1">18:00～</label>
</p>
<p><label>利用規約に同意します。<input class="inputs" type="checkbox"></label></p>
<button class="inputs">申し込み</button>
<p>
その他要望<br>
<textarea class="inputs" name="memo" rows="5" cols="30" tabindex="100">このテキストエリアはエンターキーでフォーカス移動、ALT+エンターキーで改行します。</textarea>
</p>
</div>

sample.html

<!-- sample.htmlの続き -->
<script>
class FocusOrder {
  
  constructor() {
    this.nextElements = new Map();//tabOrderを記憶するマップ
    this.init=false;
  }
  
  initOrder() {
    //初期化
    //DOMを読み込んだ後に実行してください。
    
    if (this.init) {
      //このコードをは複数回呼ばれるのを想定していません
      console.log('すでに初期化済みです');
      return;
    }
    
    this.init = true;
    
    //ターゲットとなる要素をここに指定してください。 
    let target = document.querySelectorAll(".inputs");
    
    //getElementsByClassName等で取得することも可能です
    //let target = document.getElementsByClassName("inputs");
    
    //tabIndexにマイナスを指定してあったら除外
    let wk1 = [];
    for (let i = 0; i < target.length; i++) {
      if ( 0 <= target[i].tabIndex) {
        wk1.push(target[i]);
      }
    }
    
    //tabIndex順にソート
    let wk2=wk1.sort((a,b) => {
      if (a.tabIndex == b.tabIndex) {
        return 0;
      } else if(a.tabIndex > b.tabIndex) {
        return 1;
      } else {
        return -1;
      }
    });
    
    //次にフォーカスするエレメントをMapにセット
    for (let i =0; i < wk2.length-1; i++) {
      this.nextElements.set(wk2[i],wk2[i+1]);
    }
    this.nextElements.set(wk2[wk2.length-1],wk2[0]);
    
    //各エレメントにイベントをセット
    const keyevent = event => {
      if (event.key === 'Enter') {
        event.preventDefault();//eneterキーイベントの他の挙動を止めます。
      	if (event.srcElement) {
        	if (event.srcElement.tagName.toLowerCase().startsWith('textarea')) {
              if (event.altKey==true) {
                //要素がテキストエリアでALTがついていたら現在の位置に改行(\n)を入れて抜ける
                const intPosition = event.srcElement.selectionStart;
                const wk = event.srcElement.value;
                event.srcElement.value=wk.substring(0,intPosition)+'\n'+wk.substring(intPosition);
                //キャレットの位置を修正
                event.srcElement.selectionStart=intPosition+1;
                event.srcElement.selectionEnd=intPosition+1;
                return;
              }
            }
        }
        let elTarget = event.target;
        for(let i = 0, max=this.nextElements.size; i < max; i++) {
          let elWk = this.nextElements.get(elTarget)
            if (elWk.disabled || elWk.getBoundingClientRect().width == 0) {
              //要素が使用不能かdisplay noneの際は次の要素を検索
              elTarget=elWk;
            } else {
              elWk.focus();
              break;
            }
          }
        }
    };
    
    for (let i =0; i < wk2.length; i++) {
      wk2[i].onkeydown=function(event){keyevent(event)};
    }
  }
};

//クラスのインスタンスを作成
//クラスの定義の後に記述する必要があります。
let f = new FocusOrder();
//初期化
f.initOrder();
<script>
...