いつまで経ってもわからない、WEBってやつは・・・(´・ω・`)

【jQuery】[追記あり]テキストボックスの入力制限とカーソル移動とかのjQuery Autotabを使ってみた

今更ながら、jQuery Autotabを使ってみた(*´∀`)!

内容はとても簡単。簡単なバリデート機能と、複数に分かれた入力ボックス(電話番号とか!)で大活躍すると思われるので、フォームプラグインの機能にない場合とか、使いたくて使ってみた!

使ってみた。

まず、下記を読み込む。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.autotab.js"></script>

 で、下記をいれる

<script>
jQuery(function () {
     jQuery('input[type=text]').autotab();  
});
</script>

※追記:2014/9/30
上記 input[type=text] の部分は必ずクラスをつける形で、全input[type=text]にはautotabを反映させないように注意!
iphoneにて漢字変換ができない(ΦωΦ)ので、
例) .num input[type=”text”] もしくは  input[type=”text”].num などで特定する

 ソース部分

<label for="number1">Phone Number</label>
<input type="text" id="number1" class="number" maxlength="3" size="3" /> - 
<input type="text" id="number2" class="number" maxlength="4" size="4" /> - 
<input type="text" id="number3" class="number" maxlength="4" size="4" />

 ※maxlengthで文字数カウントして次に移動する感じですね(´・ω・`)

実際

電話番号なので数字のバリデートも追加した

<script>
jQuery(function () {
   jQuery('.number').autotab('filter', 'number');
});
</script>