- ベストアンサー
タブキーとエンターキーの項目移動方法について質問
- 資料請求ページにおいて、タブキーではなくエンターキーで次の項目に移動する方法はあるのか？また、漢字モードと半角モードを自動的に切り替える方法も知りたい。
- 資料請求ページで項目を入力していく際に、タブキーではなくエンターキーで次の項目に移動する方法が知りたいです。また、漢字モードと半角モードを自動的に切り替える方法も教えてほしいです。
- 初心者の質問ですが、資料請求ページで項目を入力していく際に、タブキーではなくエンターキーで次の項目に移動する方法はありますか？また、漢字モードと半角モードを自動的に切り替える方法も教えてください。
- deepimpact
- お礼率43% (76/173)
- HTML
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
間違っていました、訂正です。 <html><head> <script type="text/javascript"><!-- var submitflag=0; //--></script> </head> head内を上記のようにします。 メールアドレス：<input name="email" onkeypress=onkeypress="if(window.event.keyCode==13) { submitflag = 1; test.e.focus(); }" style="ime-mode: disabled;"> <input type="button" name="button" value="送信" onclick="if(submitflag == 0) { test.submit(); } else { submitflag = 0; }"></form> また、ラジオボタンやチェックボックスには、style="ime-mode..." をつけないでください。 また、head内タグ、および、submitflag=...に関連するもの、および、それの評価のためのif文を抜くと、最後のフォームでEnterを押すと同時に、ボタンを同時に押すことになります。 以下、当方テスト用のものです。 <html><head> <script type="text/javascript"><!-- var submitflag=0; //--></script> </head> <body> <form action="test.html" name="test"> <input name="a" onkeypress="if(window.event.keyCode==13) { test.b.focus(); }" style="ime-mode: active;"><br> <input name="b" onkeypress="if(window.event.keyCode==13) { test.c.focus(); }" style="ime-mode: disabled;"><br> <input name="c" type="radio" onkeypress="if(window.event.keyCode==13) { test.d.focus(); }"><br> <input name="d" type="checkbox" onkeypress="if(window.event.keyCode==13) { submitflag = 1; test.e.focus(); }"><br> <input type="button" name="e" value="送信" onclick="if(submitflag == 0) { test.submit(); } else { submitflag = 0; }"> </form> </body> </html>
その他の回答 (4)
- 春原 なの（@ymda）
- ベストアンサー率37% (668/1777)
＃３補足です。 メールアドレスの所でEnterを押した場合に移動する場所を、送信ボタンにする場合、以下のようにしてください。 メールアドレス：<input name="email" onkeypress="if(window.event.keyCode==13) { mail.button.focus(); }" style="ime-mode: disabled;"> <input type="button" name="button" value="送信" onclick="this.submit();"> この場合、button=送信という内容も同時に送信されます。
お礼
すばらしい！ ありがとうございます。 でも、(;;)↑これでやると、 メールアドレスのとこで何かまちがってますかね？ メールから送信に行こうとエンターを押すとエラーが発生します。 <form action="../mail.cgi" name="mail"> お名前：<input name="name" onkeypress="if(window.event.keyCode==13) { mail.post.focus(); }" style="ime-mode: active;"> 郵便番号：<input name="post" maxlength="8" onkeypress="if(window.event.keyCode==13) { mail.address.focus(); }" style="ime-mode: disabled;"> 住所：<input name="address" onkeypress="if(window.event.keyCode==13) { mail.tel.focus(); }" style="ime-mode: active;"> 電話番号：<input name="tel" maxlength="13" onkeypress="if(window.event.keyCode==13) { mail.email.focus(); }" style="ime-mode: disabled;"> メールアドレス：<input name="email" onkeypress="if(window.event.keyCode==13) { mail.button.focus(); }" style="ime-mode: disabled;"> <input type="button" name="button" value="送信" onclick="this.submit();"></form> コピペだけしたつもりなんですが・・ それと、また付随で申し訳ないのですが、 チェックボックスやセレクトもためしたのですが、 上手くいきません これは別に何か数式があるのでしょうか？ (例えば) 電話番号を所を <INPUT type="radio" name="tel" value="1" onkeypress="if(window.event.keyCode==13) { mail.email.focus(); }" style="ime-mode: disabled;"> にしたらラジオだからでしょうか？ エラーがでるのですが・・
- 春原 なの（@ymda）
- ベストアンサー率37% (668/1777)
＃１について たぶん勘違いだと思います。 <form> ～ </form> の中に、<form> が更に存在すると誤作動します。 ですので、これらの形になるように、<form>をきちんと設定する必要があります。 ＃１で示したのは、動くもののあくまでもサンプルです。 これを参考にして、実際に使用するものの上で書き換えるべきです。 書き換えるとしたら・・・ <form action="../mail.cgi" name="mail"> お名前：<input name="name" onkeypress="if(window.event.keyCode==13) { mail.post.focus(); }" style="ime-mode: active;"> 郵便番号：<input name="post" maxlength="8" onkeypress="if(window.event.keyCode==13) { mail.address.focus(); }" style="ime-mode: disabled;"> 住所：<input name="address" onkeypress="if(window.event.keyCode==13) { mail.tel.focus(); }" style="ime-mode: active;"> 電話番号：<input name="tel" maxlength="13" onkeypress="if(window.event.keyCode==13) { mail.email.focus(); }" style="ime-mode: disabled;"> メールアドレス：<input name="email" onkeypress="if(window.event.keyCode==13) { mail.name.focus(); }" style="ime-mode: disabled;"> <input type="button" value="送信" onclick="this.submit();"> </form> というふうになります。 JavaScript内の、mail.????.focus の ???? は、次の項目に移動できるようになっています。 また、このスクリプトは、Netscape、Firefox等他のブラウザでは「動きません」 IEと他ブラウザを区別できるスクリプトも別途必要になります。
- 春原 なの（@ymda）
- ベストアンサー率37% (668/1777)
それでは、分解して説明します。 <form action="test.html" name="test"> 念のため、フォームオブジェクトに名前を指定しておく必要があります。今回は、test という名前です。 onkeypress="if(window.event.keyCode==13) { test.b.focus(); }" http://www.tohoho-web.com/js/event.htm#EventIE キー入力したときのイベントです。 キーコードが、CR であれば、test.b という所にフォーカスします。 （Macで動くかな。汗） style="ime-mode: active;" style="ime-mode: disabled;" それぞれ、IMEのON/OFFです。 http://www.tohoho-web.com/css/reference.htm#ime-mode <input type="button" value="送信" onclick="this.submit();"> type="submit" のままでは、Enterキーをこちらが先に受け取ってしまうので、button にしておき、JavaScriptでsubmitします。
- 春原 なの（@ymda）
- ベストアンサー率37% (668/1777)
まずは動くものから・・・ 完全にIE専用です。Netscape,Mozilla,Firefox,Operaとかでは動かないはずです。 <html><head></head> <body> <form action="test.html" name="test"> <input name="a" onkeypress="if(window.event.keyCode==13) { test.b.focus(); }" style="ime-mode: active;"><br> <input name="b" onkeypress="if(window.event.keyCode==13) { test.a.focus(); }" style="ime-mode: disabled;"><br> <input type="button" value="送信" onclick="this.submit();"> </form> </body> </html>
お礼
すばらしい！ありがとうございます。 なのですが、ここで質問が出ました！ 資料請求系のものなので あらかじめ<form action="../mail.cgi"></form> で質問の所が囲まれています。 お教えいただいたform囲いは <form action="../mail.cgi">#メール囲い用 <form action="test.html" name="test">#お教えいただいたもの <input name="a"・・・>お名前 送信ボタン </form> </form> とできず <form action="../mail.cgi">#メール囲い用 </form> <form action="test.html" name="test">#お教えいただいたもの </form> と なりますよね（←これ勘違いしてますか？） そこはどうしたらいいでしょうか？ <form ....> </form> <form ....> </form> はできるけど、inputが入れられない で、 <form ....> <form ....> </form> </form> この形はとれないですよね？
お礼
すばらしいです。 ほんとうにありがとうございました。 完璧ですね