JQUERYなどを使ってフォームからフォームへENTERで移動できるようにしたいのですがどうすれば可能でしょうか?


フォーム内でのENTERでの移動はこちらを参考にしたのですが
http://jsajax.com/Articles/DisableEnterKey/688

フォームから別のフォームへの移動はできませんので
それを可能にするにはどうすればよいのでしょうか?

リンク先の紹介でも構いませんが
自身でソースコードに解説をいれていただければと思います。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/03/23 18:44:36
  • 終了:2012/03/25 02:07:28

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4445ベストアンサー獲得回数18272012/03/23 19:45:38

ポイント100pt

jQuery 使ってやってみた。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
    $("input:text").keypress(function(e) {
            if (e.which == 13) {    // キーコードが改行だったら

                // 全部の <input type="text"> の配列
                var inp = $("input:text");

                for (var i = 0 ; i < inp.length ; ++i) {
                    // イベントが起きた input を見つけたら
                    if (this == inp[i]) {
                        var dest = 0;   // 次にフォーカスを当てるべき input の配列のインデックス

                        // イベントが起きた input が、配列の最後じゃなかったら
                        if (i + 1 != inp.length) {
                            dest = i + 1;       // ひとつ後にフォーカスを当てる
                        }
                        /*
                        else {      初期値でゼロを入れてるから、必要ないけど...
                            dest = 0;
                        }
                        */

                        // フォーカスを移動する
                        inp[dest].focus();

                        return;
                    }
                }
            }
        });
});
</script>

<form>
<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br>
</form>

<form>
<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br>
</form>|

jsFiddle で試してみたのが↓。
http://jsfiddle.net/a_kuma3/gujVa/

他3件のコメントを見る
id:a-kuma3

連想配列というか、普通の配列なんですが、

var inp = $("input:text");

を実行した時点で配列が作られます。

2012/03/25 01:59:51
id:robopit

ありがとうございます。
色々と勘違いしていたことにわかりました。

2012/03/25 02:07:01

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません