水曜以外もどうでしょう

北海道発。食べ歩きの記録グルメ情報や北海道の見どころなどをメモ替わりに書いています。

PREV | PAGE-SELECT | NEXT

≫ EDIT

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
応援宜しくお願いします。ポチ↓↓
fC2ブログランキング にほんブログ村 グルメブログ 北海道食べ歩きへ 人気ブログランキングへ


| スポンサー広告 | --:-- | comments(-)| trackbacks(-)| TOP↑

≫ EDIT

フォームで自動的に次の入力欄へ移る方法

webのフォーム入力で、指定の桁数の文字を打ち込んだら、自動的に次の入力欄へ移る方法。

例えば、クレジットカードの入力欄を作成したい様な場合に、4桁ずつの入力欄を作って4桁の数字を打ったら隣の入力欄へカーソルが自動的に移動するやつ。


実際に自分がネット通販を利用するときにも、こういう機能を見たことがあったので、「できないことはないんだろうな・・」、と思いつつネット検索。

やはりあった。

jQueryを利用する。jQueryはJavaScriptのライブラリ。


jQueryをダウンロード
http://docs.jquery.com/Downloading_jQuery

「Current Release」から、Minifiedをダウンロードする。

ちなみに、MinifiedとUncompressedがあるが、
Uncompressedはいわゆるインデントや改行などを入れてありソースが読みやすいバージョン。
Minifiedはインデントや改行がない。その分ファイルサイズが小さくなる。

そして、jQuery用のプラグイン。
jQuery auto-tabbing and filter plugin
http://www.lousyllama.com/sandbox/jquery-autotab

「Download Autotab X.X」からダウンロードする。(X.Xはバージョン)

使い方はauto-tabのページに書いてあるが、

----- JS include ---
<script type="text/javascript" src="../js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.autotab.js"></script>
--------------------

----- フォーム -----
<input type="text" name="card_number1" id="card_number1" maxlength="4" size="4" /> -
<input type="text" name="card_number2" id="card_number2" maxlength="4" size="4" /> -
<input type="text" name="card_number3" id="card_number3" maxlength="4" size="4" /> -
<input type="text" name="card_number4" id="card_number4" maxlength="4" size="4" />
--------------------

----- autotab設定 --
<script type="text/javascript">
$(document).ready(function() {
$('#card_number1').autotab({ target: 'card_number2', format: 'numeric' });
$('#card_number2').autotab({ target: 'card_number3', format: 'numeric', previous: 'card_number1' });
$('#card_number3').autotab({ target: 'card_number4', format: 'numeric', previous: 'card_number2' });
$('#card_number4').autotab({ previous: 'card_number3', format: 'numeric' });
});
</script>
--------------------

設定では、
入力フィールドのidを利用する。(例では、card_number1など)
そして、フィールド前後関係をtargetとpreviousで定義する。
formatは
text (anything but numbers), alpha, numeric, number (same as numeric), alphanumeric, and allのような指定ができ、
入力を数字やアルファベットに限定できる機能があるようだ。


おー、
4桁打ったらうつったぞ。

formatにnumericを指定したから、アルファベットを受付ないし。これはいい。

でも、キー入力のたびにエラーコンソールにエラーがでる。

「keyupイベントではcharCodeプロパティの値には意味がないため使用すべきではありません」

解決したいけど、まぁ動いているから今度の機会に。



jQuery参考ページ
http://semooh.jp/jquery/ref/cont/tutorial/

スポンサーサイト
応援宜しくお願いします。ポチ↓↓
fC2ブログランキング にほんブログ村 グルメブログ 北海道食べ歩きへ 人気ブログランキングへ


| web系 | 17:02 | comments:0| trackbacks:0| TOP↑

COMMENT















非公開コメント

TRACKBACK URL

http://vmemo.blog36.fc2.com/tb.php/110-f07b03cd

TRACKBACK

PREV | PAGE-SELECT | NEXT

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。