前の記事 ≪:ブルーが美しいWEBサイトレイアウト作成Photoshopチュートリアル30
次の記事 ≫:2010年5月24日 管理人のブックマーク

入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」

2010年05月24日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

Autotabindex Example

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



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

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

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

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

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

関連エントリ

関連の記事検索:jQuery, プラグイン
スポンサード リンク

By.KJ : 2010年05月24日 11:07 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)