【JS】クレジットカード番号を入れるフォームで、4桁入れ終わったら次のフォームにフォーカスを移すスクリプトをjQueryで組んでみた
2018/10/09
サブジェクトそのまんまですが、クレジットカード番号を入れるフォーム（4つに分割してる）を入力する際の入力補助として、4桁入れ終わったら次のフォームにフォーカスを移すというスクリプトを組んでみました。
テストで入力しているとタブを押すのも面倒くさくなっていたので、自動的に動いてもいいのではないか、と思いついて作ってみました。
使っている手法は既にこのブログで公開しているスクリプトを組み合わせるだけだったので、15分ほどで出来上がってしまいました。
ログって大事だ。
自動的にフォーカスを移すスクリプト
HTML
ということでスクリプト公開。
まずはフォーム。INPUTが4つ並んでるだけです。
CakePHP2.xのソース（ほぼ）そのままなので、nemaが配列になっていますが、気にせずに。
共通のクラス名（cardnumber）をつけてください。
|
1 2 3 4 5 |
<p>カード番号</p> <input name="data[Creditcard][cc_number1]" class="cardnumber" size="4" maxlength="4" required="required" type="text" id="CreditcardCcNumber1"/> - <input name="data[Creditcard][cc_number2]" class="cardnumber" size="4" maxlength="4" required="required" type="text" id="CreditcardCcNumber2"/> - <input name="data[Creditcard][cc_number3]" class="cardnumber" size="4" maxlength="4" required="required" type="text" id="CreditcardCcNumber3"/> - <input name="data[Creditcard][cc_number4]" class="cardnumber" size="4" maxlength="4" required="required" type="text" id="CreditcardCcNumber4"/> |
スクリプト
次はJavascript。
keyupした時の文字数を取得し、4以上になったら next().focus() で次フォームに移しているだけです。
かなり単純なスクリプトですが、意外と役立ちそう。
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(function(){ $('.cardnumber').bind('keyup',function(){ var thisValueLength = $(this).val().length; if (thisValueLength >= 4) { $(this).next().focus(); } }); }); </script> |
デモ
カード番号
- - -