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

解決済

質問者：pick52
質問日時：2008/07/11 19:26
回答数：1件

問題の原因が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)。

説明が下手で分かりにくいかもしれませんがこれの原因の詳細と
対策はありませんか。

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1ベストアンサー

回答者： noname#66720
回答日時：2008/07/11 23:07

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

この回答への補足

ありがとうございます。

少々惜しいです。
元々は、JavaScriptが有効になっていない場合は<NOSCRIPT>でエラーを
出してフォーム自体を表示したくなかったため、CSSで非表示にして
onloadですぐに表示するようにしています。

しかし、overflowを使用すると確かにEnterでサブミットは効きますが
JSが無効になっているときに隙間が空いてしまいます。
(スクロールバーが表示されたりその前後の内容が離れて表示されます)

フォームを全部JSで出力するという手もありますが、JSではPerlの
ヒアドキュメントみたいなことができないはずなので面倒で、
どうしようかと思っています。

補足日時：2008/07/12 02:07

通報する