Autotabindex Example

入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」。
例えば、携帯番号を入力する場合など、一定の文字数以上になった場合に、TABキーを押すなどせずとも、次のフィールドにカーソルを合わせることができます。
TABキーを知らないライトユーザーな方々はマウスでいちいち移動していたりもしますが、このプラグインでユーザビリティを上げられそうです。



JavaScript で１から実装するとなると、少し面倒な上に、要素ごとにonkeydownを入れたりしてコードが汚くなったりしますが、jQueryプラグインなので１行で次のように初期化できます。

$(document).ready(function() {
    $('.autotabindex').autotabindex();
});

で、具体的にその文字数指定をするにはどうするかというと、次のように maxlength="x" のように指定してあげればよいみたい。

<input type='text' class='autotabindex' tabindex='1' maxlength='2' style='width:30px'/>

という感じで、なんでもjQueryで出来てしまいますね。

関連エントリ

• jQueryで入力文字数を制限して誤入力を防げるプラグイン「jQuery Imput Limiter」
• 何時何分何秒の入力を便利にするjQueryプラグイン「jTimepicker」
• 何を入力したかが分かるiPhoneスタイルのパスワード入力フィールド実装jQueryプラグイン