フォームで入力時自動で次の項目に移るプラグイン

質問

こんにちは。
「Autotab: jQuery auto-tabbing and filter plugin」
http://www.lousyllama.com/sandbox/jquery-autotab

これを、prototype.jsで実現したいです。
でも全くわかりません。どうか教えてください。
よろしくおねがいします。

回答No.2

x_jouet_x · ベストアンサー

> こんなのを紹介してるサイトがありましたが、
> prototype.jsを併用すると動作しません。

waterclockさんが補足で貼られたJavaScriptのソースコードを元にprototype.jsで動作するものを作成してみました。
prototype.jsと併用するとタグ内に記述した onkeyup='...' が解釈されなくなるようですね。理由は分かりませんが…。

下記に作成したものを載せておきますが、Linux版のFirefox上でしか動作確認していません。
他のブラウザで動作するか分かりませんが、参考にして下さい。

[JavaScript]
<script type="text/javascript">
<!--
var targets; // input要素を保持しておく

/*----- Windowロード時の処理 -----*/
window.onload = function() {
targets = $$("input");
targets.each(function(target) {
target.observe("keyup", next); // 各input要素に対してkeyupイベントハンドラを設定
});
};

/*----- keyupイベントハンドラ -----*/
function next(event) {
var element = event.element(); // イベントが発生した要素

// maxlength属性値の取得
var maxlength;
if (element.readAttribute("maxlength") != null) {
maxlength = element.readAttribute("maxlength");
} else {
maxlength = 2147483647; // maxlength属性値がない場合は最大値に設定
}

// 入力文字列の取得
var value = element.value;

// 入力文字列の長さ < maxlengthの時は何もしない
if (value.length < maxlength) {
return true;
}

element.blur(); // フォーカス解除

// 次の要素にフォーカスを当てる
var n = targets.indexOf(element);
if (n != -1 && n < targets.size() - 1) {
(targets[n + 1]).focus();
}
}
//-->
</script>

[HTML]
<form>
Zip-code：<input type='text' size='3' id='former' onkeyup='next(0);' maxlength='3' /> -
<input type='text' size='4' id='latter' onkeyup='next(1);' maxlength='4' /><br />
Address：<input type='text' id='address' size='20' />
</form>

お礼

これ良いですね。inputタグにonkeyupってかかなくてもＯＫです。
AjaxZip2を使ってますが、問題なく動作しました。

郵便番号のところがスパ、スパっと進むだけで、なんか嬉しいですね。
電話番号は、色々あるから無理かな。

どうもありがとうございました。

回答No.1

kura07

そんなに難しくないスクリプトだと思いますけど？
prototype.js使わなくてもできそうな気がします。
（もっとも、prototype.jsを使えばスクリプトが短くなるとは思いますが）

onkeyupで関数を呼び出して、指定文字数入力されていたら次のフォームを.focus()する。
数字しか入力できないフォームは正規表現とかでチェックする。

…という感じでしょうか。

お礼

早速ありがとうございます。
でも難しいです。

補足

<script type='text/javascript'>
var target = new Array('former','latter','address');
var focus = new Array(3,4);

function next(n){
if(document.getElementById){
var f = document.getElementById(target[n]).value;
if(f.length < focus[n]){ return true; }
document.getElementById(target[n]).blur();
document.getElementById(target[n+1]).focus();
}
}
</script>

///------------------//////

<form>
Zip-code：<input type='text' size='3' id='former' onkeyup='next(0);' maxlength='3' /> -
<input type='text' size='4' id='latter' onkeyup='next(1);' maxlength='4' /><br />
Address：<input type='text' id='address' size='20' />
</form>

こんなのを紹介してるサイトがありましたが、
prototype.jsを併用すると動作しません。
prototype.jsは、違う目的で必須ですので、外せないのです。
この郵便番号部分だけ、自動移動のタブにしたいのです。
よろしくお願いします。