人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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


●質問者: robopit
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

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/


robopitさんのコメント
返答遅くなって申し訳ありません 2重投稿消したつもりで本文が消えていたようです。 回答は完璧です。ありがとうございます! 一つ質問があるのですが、lengthはカウントしていくと同時に配列を作製していくということなんでしょうか? 初歩的なものかもしれませんが、よろしくお願いします。

a-kuma3さんのコメント
何度かコメントをいただいてたようですが、削除されてたので、何となくコメントしそびれてました。 >> 一つ質問があるのですが、lengthはカウントしていくと同時に配列を作製していくということなんでしょうか? << $("input:text") を呼び出した時点で、&lt;input type="text" ...&gt; な要素の配列を作ります。 for のループしているときに順番に調べている、というわけではありません。 というので、答えになってますか?

robopitさんのコメント
inp[i]と出ているので 連想配列になっていると思うのですが 連想配列になるタイミングはいつなのかな?と思いまして inpで配列を作ったということなので 連想配列はinp.lengthとされた時点なのでしょうか?

a-kuma3さんのコメント
連想配列というか、普通の配列なんですが、 >|javascript| var inp = $("input:text"); ||< を実行した時点で配列が作られます。

robopitさんのコメント
ありがとうございます。 色々と勘違いしていたことにわかりました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ