指定文字数を入力したら自動で次のフィールドへ移動させる

harada 4,114views 更新:2014年3月19日

4桁打ったら自動で次のフィールドへフォーカスが移動するようにします。

<script type="text/javascript">
function nextField(i, n, m) {
  if (i.value.length >= m) {
    i.form.elements[n].focus();
  }
}
</script>
<input type="text" name="n1" style="width:4em;ime-mode:disabled;" maxlength="4" onKeyUp="nextField(this, 'n2', 4)">
 - 
<INPUT type="text" name="n2" style="width:4em;ime-mode:disabled;" maxlength="4" onKeyUp="nextField(this, 'n3', 4)">
 -
<INPUT type="text" name="n3" style="width:4em;ime-mode:disabled;" maxlength="4" onKeyUp="nextField(this, 'n4', 4)">
 -
<INPUT type="text" name="n4" style="width:4em;ime-mode:disabled;" maxlength="4">

クレジットカード番号入力フォームに利用したいと思い調べていたのですが、クレジットカード番号は必ずしも4-4-4-4の16桁ではないようです。Wikipedia:クレジットカードの番号

実際にこれを実装するには各カード会社のプレフィックスにより桁数を判別して振り分ける必要がありますね・・・。やっぱりjQueryプラグインなどを利用するのが一番簡単そうです。

参考:入力カーソルを自動的に次のフィールドへ移動する

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません