[JQuery]フォーム入力後、次のフォームに自動的にフォーカスを移動させる方法

ユーザ情報を入力させる場合、複数のフォームがあるとフォーム間の移動が少し厄介ですよね。そうした場合、JQueryを使って入力が完了したフォームから次のフォームに自動的にフォーカスを移動させることが可能です。

以下をHeadに追加すればOK

<script type='text/javascript'>

    $(function() {
        
        $('input').on('keyup', function() {
            var max = $(this).attr('maxlength');  
            var current = $(this).val().length;  
            if(current >= max) {
                var nextIndex = $('input').index(this) + 1;
                 $('input')[nextIndex].focus();
                
            }
        })
    })
</script>

$(function() {

$('input').on('keyup', function() {

var max = $(this).attr('maxlength');

var current = $(this).val().length;

if(current >= max) {

var nextIndex = $('input').index(this) + 1;

$('input')[nextIndex].focus();

}

})

</script>

inputの要素を取得し、maxlengthの数値と実際の入力された文字列を比較、それらが一致もしくは上回ったときに次のフォームにフォーカスを移動させます。inputの要素は配列で保持されているので、nextIndexで移動先のフォームの位置を特定してあげる必要があります。

返信を残す コメントをキャンセル

返信を残すコメントをキャンセル