タブキーでなくエンターキーで次の項目へ

解決済

質問者：deepimpact
質問日時：2005/04/14 15:28
回答数：5件

すいませんおせーてください
すんごく初心者の質問かもしれません

よくある、資料請求系のページで
名前、住所、TEｌ、メアド・・・
とか入れていく仮定において２つ質問があります。

１
ある項目（例えばテキストボックス）を入力して
次の項目に映る時タブキーを押すと移動するのはわかるのですが、それがエンターキーで次の項目に移動できるようにはできるのですか？
送信を押したのと一緒の扱いになってしまうので何とかならないかな？と

２
もう一つは漢字モードと半角モードを自動的に
そのテキストボックスにフォーカスした時に
決めれるのですか？

２は出来た記憶があるのですが、どこにその説明が
あったかわかりません
１はわかりませんでした。

どっかのURLでも構わないので
教えてくださいませんか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： ymda
回答日時：2005/04/14 18:34

間違っていました、訂正です。

<html><head>
<script type="text/javascript"></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"></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>

- 0
- 件

通報する

この回答へのお礼

すばらしいです。
ほんとうにありがとうございました。
完璧ですね

通報する

お礼日時：2005/04/14 19:46

No.4

回答者： ymda
回答日時：2005/04/14 17:04

＃３補足です。

メールアドレスの所で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=送信という内容も同時に送信されます。

- 0
- 件

通報する

この回答へのお礼

すばらしい！
ありがとうございます。

でも、(;;)↑これでやると、
メールアドレスのとこで何かまちがってますかね？
メールから送信に行こうとエンターを押すとエラーが発生します。
<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;">

にしたらラジオだからでしょうか？
エラーがでるのですが・・

通報する

お礼日時：2005/04/14 17:16

No.3

回答者： ymda
回答日時：2005/04/14 17:01

＃１について

たぶん勘違いだと思います。

<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と他ブラウザを区別できるスクリプトも別途必要になります。

- 0
- 件

通報する

No.2

回答者： ymda
回答日時：2005/04/14 16:01

それでは、分解して説明します。

<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- …

<input type="button" value="送信" onclick="this.submit();">

type="submit" のままでは、Enterキーをこちらが先に受け取ってしまうので、button にしておき、JavaScriptでsubmitします。

- 0
- 件

通報する

No.1

回答者： ymda
回答日時：2005/04/14 15:56

まずは動くものから・・・

完全に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>

- 0
- 件

通報する

この回答へのお礼

すばらしい！ありがとうございます。
なのですが、ここで質問が出ました！

資料請求系のものなので
あらかじめ<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>

この形はとれないですよね？