display: none を使用すると Enter キーでサブミットできなくなる

前へ 次へ
このQ&Aのポイント
  • 質問文章からセンセーショナルなタイトルを30文字前後で生成
  • 問題の原因はJavaScriptの範囲内であり、IEのバグによるものです。
  • IE以外のブラウザでは正常に動作するため、IEのバージョンによる対策が必要です。
回答を見る
  • ベストアンサー

display: none をすると Enter キーでサブミットできなくなる

問題の原因がJavaScriptの範疇なのか(JSなのかHTMLなのかIEなのか CSSなのかそれとももっと別の部分なのか)どうかも分かりませんが、 以下のようにすると(恐らくIEのバグ?によって)IEでEnterキーで サブミットできなくなります。 (テストのために重要な部分だけPerlで簡略化して出力しています) #!perl print "Content-type: text/html\n\n"; print <<"HTML"; <body onload="document.form1.style.display = 'block'; document.form1.input0.focus();"> <form name="form1" style="display: none;"> HTML for(my $i = 0; $i < 50; $i++) { print qq(<input type="text" name="input$i"><br>\n); } print <<"HTML"; <input type="submit"> <input type="reset"> </form> </body> HTML 概要 1. 画面外にはみ出す量のフォーム内容をdisplay: noneしてから JavaScriptで表示します。 2. フォームにフォーカスを与えてEnterキーを押しても反応しません。 3. display: noneしなければEnterキーが効きます。 4. 一度画面内にサブミットボタンを表示させると効くようになりますが サブミットボタンを画面から外した後に更新をかけるとまた効かなく なります。 4. IE 以外では正常動作するようです(テストしたIEのバージョンは 6.0 SP2)。 説明が下手で分かりにくいかもしれませんがこれの原因の詳細と 対策はありませんか。

質問者が選んだベストアンサー

  • ベストアンサー
noname#66720
noname#66720
回答No.1

display:none;をwidth:0; height:0; overflow:hidden;にしてはどうでしょう。

pick52
質問者

お礼

もう、新しい回答は期待できないのでこれで締め切らせていただきます。 metametamu さん、ありがとうございました。

pick52
質問者

補足

ありがとうございます。 少々惜しいです。 元々は、JavaScriptが有効になっていない場合は<NOSCRIPT>でエラーを 出してフォーム自体を表示したくなかったため、CSSで非表示にして onloadですぐに表示するようにしています。 しかし、overflowを使用すると確かにEnterでサブミットは効きますが JSが無効になっているときに隙間が空いてしまいます。 (スクロールバーが表示されたりその前後の内容が離れて表示されます) フォームを全部JSで出力するという手もありますが、JSではPerlの ヒアドキュメントみたいなことができないはずなので面倒で、 どうしようかと思っています。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • エンターでsubmitさせたい

    テキストボックスが複数あるようなフォームを作っているのですが、 submitボタンを表示させず、エンターのみで動作するものを作りたいと思っています。 stype="display:none;"で表示を消すことができたのですが、 エンターを押しても動作しません。 ご存知の方教えて頂けると大変助かります。 <form method="post"> <input type="text" size="10" name="obj1"> <input type="text" size="10" name="obj2"> </form> <? print $_POST['obj1']."<br>"; print $_POST['obj2']."<br>"; ?>

    • ベストアンサー
    • PHP
  • ENTERキー押下でフォームを送信したいのに・・・

    PHPとHTMLでフォームをいくつか作り、画像タイプの送信ボタンを押下すると送信されるようにしています。ところが、IEの場合、ENTERキー押下で送信できる（下記のPHPの制御文がtrueになる）ものと、できないものがあります。ボタンをクリックすればいずれも送信できます。また、FirefoxではどのケースでもEnterキー押下で送信できます。送信ボタンはどのフォームでもひとつです。 何がどういう場合に、IEでEnterで送信できないのでしょうか？ ○HTML側 <form...> ... <input type="image" name="submit" ...> </form> ○PHP側 if(isset($_POST['submit_x']) { ... }

    • 締切済み
    • PHP
  • enterキーでのtab移動

    質問させて頂きます。 下記の様にenterキーを押してtab移動しようと考えています。 <form name="form"> <input type="text" id="id1" onkeypress="if(code == 13)document.form.item('id2').focus();"> <input type="text" id="id2" onkeypress="if(code == 13)document.form.item('id3').focus();"> <input type="button" id="id3" value="ボタン"> </form> ここで、textフォームからボタンへ移動する場合、自動的にボタンが押されてしまいます。 （エンターキーでの移動のため） ボタンが押されないような方法はあるでしょうか。アドバイスお願い致します。

  • テキストボックスをEnterキーで移動する際のビープ音

    あるテキストボックスでEnterキーを押すと、次のテキストボックスに移動する スクリプトを組んだのですが、動作はしますが必ず「ブー」というビープ音が 鳴ってしまいます。 たぶん、改行できないテキストボックス内でEnterキーを押すことで、「ダメだよー」 っという警告だと思うのですが、どうにかして消すことはできないのでしょうか？ どのような些細なことでも構いませんので、ご教授願います！ ～Java Script～ function Change(){ if(event.keyCode==13) document.form.name2.focus(); } ～HTML～ <FORM NAME="form"> <INPUT TYPE="text" NAME="name1" onKeyDown="Change()"> <INPUT TYPE="text" NAME="name2"> </FORM>

  • WebでEnterキーを押した時の挙動

    カテが間違えていたらすみません。 下記ソースにてEnterキーを押すと、検索ボタンを押した事になり、「検索ボタンが押された！」とポップアップするにはどのようにすればよいでしょうか。 <HTML> <BODY> 　<INPUT TYPE = "text"> 　<INPUT TYPE = "button" value="検索" onClick="javascript:alert('検索ボタンが押された！')"> 　<INPUT TYPE = "button" value="クリア"> </BODY> </HTML> ブラウザはIE6です。補足が必要でしたら仰ってください。 宜しくお願いします。

  • テキストエリアをenterキーでフォーカス移動したい

    複数あるテキストエリア間を、enterキーでフォーカス移動をしたいです。 以下のようにしましたが、２つめのテキストエリアへフォーカス移動すると、改行が入力され、カーソルが２行目へ移動してしまいます。 enterキーを押しているのでこうなってしまうと思うのですが、 カーソルが１行目へ移動するようにするには、どうしたらいいでしょうか？ フォーカス移動後に改行コードがあったら、""にreplaceする・・等、試してみたのですが、なかなか上手くいきません。 どなたかお分かりになる方がいらっしゃったら、教えてください。 <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function FirstFocus() { document.forms.F1.elements[0].focus(); } function nextFocus(n) { if (event.keyCode == 13) { for (var i = 0, f = n.form.elements; i < f.length; i++) { if (f[i] == n) { (f[i + 1] || f[0]).focus(); } } } } //--> </SCRIPT> </HEAD> <BODY onload="FirstFocus()"> <FORM name="F1"> <TEXTAREA name="T1" rows="5" cols="30" onkeydown="nextFocus(this);"></TEXTAREA><BR> <TEXTAREA name="T2" rows="5" cols="30" onkeydown="nextFocus(this);"></TEXTAREA><BR> <TEXTAREA name="T3" rows="5" cols="30"></TEXTAREA><BR> </FORM> </BODY> </HTML>

  • ENTERキーを無効にしたいのですが教えて下さい

    ENTERキーを無効にしたいのですが、SUBMITボタンでjavascriptを動かしています。 SUBMITを押した瞬間に、別ウィンドウにデータを渡しているのですが、 どの部分にどのようなスクリプトを追加すれば良いでしょうか？ 良かったら教えて下さい。 ■親ウィンドウのHTML <html> <head> <title>親</title> <script type="text/javascript"> <!-- window.name = (new Date()).getTime();　　　 function make_newwin(f) { 　　f.target = window.name + "_ko"; 　　var w = window.open("about:blank", f.target, "スタイル設定"); 　　w.focus(); } //--> </script> </head> <body> <form name="test" action="/cgi-bin/test-check.cgi" method="post" onSubmit="make_newwin(this)"> <input type="submit"> </form> </body> </html>

  • ENTERキーを無効にしたいのですが教えて下さい。その２

    以前、以下の方法を教えていただいてうまくいったのですが、 ボタンを画像ボタンにし、javascriptで、押したら沈むボタンを 作成したところ、ENTERキーが無効にならなくなりました。 ENTERキーを押されて送信されないことが先決なので、 どなたかご伝授いただければと思います。 以前のスクリプト <html> <head> <title>親</title> <script type="text/javascript"> <!-- window.name = (new Date()).getTime(); function make_newwin(f) { 　　f.target = window.name + "_ko"; 　　var w = window.open("about:blank", f.target, "スタイル設定"); 　　w.focus(); 　　f.submit(); } //--> </script> </head> <body> <form action="/cgi-bin/test-check.cgi" method="post" onSubmit="return false"> <input type="button" value="送信" onClick="make_newwin(this.form)"> </form> </body> </html> こちらで、 <input type="button" value="送信" onClick="make_newwin(this.form)"> これを以下のようにtypeを変えてしまったところ、効かなくなりました。 <input type="image" SRC="new.gif" ALT="新規登録ボタン" NAME="botan_new11" WIDTH="78" HEIGHT="26" BORDER="0" ID="botan_new" border=0 onMouseOver="MM_swapImage('botan_new11','','botan_new_sw.gif',1)" onMouseOut="MM_swapImgRestore()" onClick="make_newwin(this.form)"> これは、無理な話なのでしょうか？教えて下さい。

  • 入力欄とそれを入力中にエンターを押した時の、ボタンの連動方法

    文章で書くと分かりにくいかもしれませんが、 入力枠（<input type="text" ...）が２つあり、 それに対応するサブミットボタンも１つづつあるとします。 各入力枠に入力中に、エンターを押した時のボタンを 自動的に適応させるにはどうしたらよいでしょうか。 ・・・やっぱり、文章だと分かりにくいかもしれませんが・・・。 例えば、ぐーぐるの検索結果画面だと、画面上部にも 下部にも、検索条件入力欄があって、それぞれ、右側に検索実行のボタンがありますよね。 そのボタンは、上の入力欄にフォーカスを当てると、 上のボタンにエンターのフォーカス（？）が自動的にきますよね。 下の入力欄にフォーカスを当てると、下のボタンにエンターのフォーカス（？）がきます。これのやり方がしりたいです。 JavaScriptの話ではないかもしれませんが・・・。 どなたか教えてください。お願いします。

  • enterについて２

    <form onsubmit="openWin0003( '2','./test.html')";return false;"> <INPUT TYPE="TEXT" NAME="no" SIZE="10" MAXLENGTH="8"> </form> でenterキーを押した時にfunctionを実行することは 成功したのですが、 このときにwindow.openした時に、すでに開かれているブラウザまで読みこんでしまうのですが、これを回避するにはどうすればいいのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する