固定長テキストボックスとでも言いましょうか。。
郵便番号・クレジットカード・シリアルナンバーのような
複数あるフィールドの各桁数が固定で決まっているテキストボックスが複数並んでいる場合に、
文字列長の最大桁数まで入力したら次のテキストボックスへ自動でカーソルを移したい
などの要件がたまにあったりします。
つまり、郵便番号でいえば、最初の3桁・次の4桁、とテキストボックスが分かれていて
3文字入力したら次の4桁のテキストボックスにフォーカスをする。
とでも言いましょうか。
(以降text1, text2と呼びますね)
でもそれって、考えなければいけないことが少しあったりします。
色々なキーの入力制御です。
挙動
- 3桁入力して
text2にてバックスペースを押したらカーソルはtext1に移る。
さらにtext1の1文字を削除することもできるような処理とする。 - 左右の矢印キーにてテキストボックス内を移動している場合
text1とtext2内は端に来た場合でも前後に移動できるようにしたい。
他にも要件によって出てくるものもあるかも知れません。
今回はこれを実装してみました。
動作 (デモ)
テキストボックスのグループには3つ以上あってももちろん正常に作動します。
実装
HTML側はこんな感じです。
classにfixed-input-groupというものを勝手に定義して宛てています。
Bootstrapではinput-groupがありますが、これを踏襲して命名しています。
これによりハンドリング対象のテキストボックスのグループを特定させます。
また、<input type="text" maxlength="20"> のようにmaxlengthの指定を行います。
これにより、最大文字列長まで入力された場合に次input要素へフォーカスなどの動作を実現させます。
jQuery側は
$('.fixed-input-group').on('keydown', 'input', function(e) {
と実装して.fixed-input-group内のすべてのinputタグへの入力を処理していきます。
function内は、大きく分けて2つのブロックから成っています。
前半は特殊キー押下時の挙動。
後半はABCなど通常キー押下時の挙動です。
- Backspaceキー押下の場合で、入力要素が既に空の場合は、前のinput要素へfocusします。
- 左矢印キー押下の場合で、カーソルが先頭にある場合は、前のinput要素へfocusします。
- 右矢印キー押下の場合で、カーソルが最後にある場合は、次のinput要素へfocusします。
後半部は
- 入力が最大文字列長まで行われていたら、次のinput要素へfocusします。
focusしたinputもmaxlengthまで入力されているかどうかで、少し挙動を変えています。
(ここらへんは好みと決めの問題ですね。)
ちなみに
郵便番号のハイフン区切りから連想して、
電話番号も同じように実装できそうと思うかも知れませんが、
携帯電話の番号は区切り位置が固定ではないのでもう少し工夫が必要です。
text1が 090/080/050 だったら text2, text3 は4桁4桁ですが
text1が 042 とかだったら text2, text3 は3桁4桁になったり
などとなるため、一筋縄ではいかなそうです。
