ユーザ情報を入力させる場合、複数のフォームがあるとフォーム間の移動が少し厄介ですよね。そうした場合、JQueryを使って入力が完了したフォームから次のフォームに自動的にフォーカスを移動させることが可能です。
以下をHeadに追加すればOK
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
inputの要素を取得し、maxlengthの数値と実際の入力された文字列を比較、それらが一致もしくは上回ったときに次のフォームにフォーカスを移動させます。inputの要素は配列で保持されているので、nextIndexで移動先のフォームの位置を特定してあげる必要があります。