※ ChatGPTを利用し、要約された質問です（原文：display: none をすると Enter キーでサブミットできなくなる）
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)。
説明が下手で分かりにくいかもしれませんがこれの原因の詳細と
対策はありませんか。
お礼
もう、新しい回答は期待できないのでこれで締め切らせていただきます。 metametamu さん、ありがとうございました。
補足
ありがとうございます。 少々惜しいです。 元々は、JavaScriptが有効になっていない場合は<NOSCRIPT>でエラーを 出してフォーム自体を表示したくなかったため、CSSで非表示にして onloadですぐに表示するようにしています。 しかし、overflowを使用すると確かにEnterでサブミットは効きますが JSが無効になっているときに隙間が空いてしまいます。 (スクロールバーが表示されたりその前後の内容が離れて表示されます) フォームを全部JSで出力するという手もありますが、JSではPerlの ヒアドキュメントみたいなことができないはずなので面倒で、 どうしようかと思っています。