Javascriptで指定桁数を入力したら次のInputへ勝手にフォーカスするアレを実装

カード入力のフォーム画面などで、5桁ぐらいにInputがあってその桁数を入力すると次のInputへ勝手にフォーカスが移ることってありますよね。

個人的にはフォームを操作する際にTabを押してしまう癖があるのでとても使いづらいですが。。。

ただ、一般的には何も操作せずに次の入力が続けられるというのはUX的に便利なのか実装をお願いされるケースがあります。

一度処理を作ってしまえばいくらでも応用できるので簡単なサンプルソースを備忘録がてら残しておきます。

サンプルソース

前提

  • Input要素はtextでname属性にcard_number_1,2,3,4…1のようになっている
  • 同一ページ内に他にInput要素はない
  • 桁数は4桁(maxlengthで指定する)
  • 最後のInput到達したらそこに留まる
$('input[name^="card_number_"]').keyup(function(e){

        // ここで桁数を比較して一致したら次のインプットへ移動
        if( $(this).val().length == $(this).attr('maxlength') ) {

            // Input要素を保持して
            var list = $("input:visible");
            var self = $(this);
            list.each(function(index){

                // ループしながら俺と比較
                if ($(this).is(self)) {

                    var targetIndex = (index + 1);
                    list.eq(targetIndex).focus();
                    e.preventDefault();
                }

            });
        }
});

注意点

keyupを使っているのでこのままだと、すべてのキーイベントを拾ってしまい使えないので有効なキーコードを指定するような工夫が必要。

参考サイト

chenge,keypress,keyupの挙動の違いについて下記がとても参考になりました。
jQueryでテキストボックスの変更を監視/検知する

追記

尊敬するエンジニアの先輩から「maxlength」で比較したほうがいいのでは?との指摘があったので修正
下記に同じことを既に記事にしていました。
(こちらの方がとても参考になりますw)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る