前の記事 ≪:巨大な背景画像を使って秀逸にデザインされたサイト集
次の記事 ≫:おもしろ画像を数分単位で紹介している「おもしろ画像社」

フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」

2008年09月17日-はてなブックマーク

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

Autotab: jQuery auto-tabbing and filter plugin | Matthew Miller

フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」。

電話番号入力欄や、郵便番号入力欄で、フィールドが複数に分かれている場合、桁数が決まっているのであれば、次のフィールドに自動で移ってくれた方が使い勝手はよくなります。
Tabで移動することは出来ますが、その処理を知らない場合はマウスで移動する人なんかもいそうですし、打つキー数も多くなります。

そこで、オンラインバンキングなどではよくある、規定の桁を入力した後は次のフィールドに自動で移ってくれるJSライブラリがjQueryベースで開発され、公開されています。



実装は簡単で、まず必要なJSを読み込みます。

<script type="text/javascript" src="jquery.autotab.js"></script>

で、次のようにマークアップを指定。

<form>
<div><strong>Phone Number:</strong></div>
<input type="text" name="area_code" id="area_code" maxlength="3" size="3" /> -
<input type="text" name="number1" id="number1" maxlength="3" size="3" /> -
<input type="text" name="number2" id="number2" maxlength="4" size="5" />
</form>

で、あとは次のようにautotabメソッドで初期化します。

<script type="text/javascript">
$(document).ready(function() {
$('#area_code').autotab({ target: 'number1', format: 'numeric' });
$('#number1').autotab({ target: 'number2', format: 'numeric', previous: 'area_code' });
$('#number2').autotab({ previous: 'number1', format: 'numeric' });
});
</script>

自分で実装するのも難しいわけではないですが、手間を削減したい場合、この簡単さはよいですね。

関連の記事検索:JavaScript, jQuery, ユーザビリティ
スポンサード リンク

By.KJ : 2008年09月17日 10:05 livedoor Readerで購読 Twitterに投稿

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