こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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)。

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

投稿日時 - 2008-07-11 19:26:51

QNo.4168849

暇なときに回答ください

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

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

投稿日時 - 2008-07-11 23:07:38

補足

ありがとうございます。

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

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

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

投稿日時 - 2008-07-12 02:07:50

お礼

もう、新しい回答は期待できないのでこれで締め切らせていただきます。

metametamu さん、ありがとうございました。

投稿日時 - 2008-07-29 16:58:05

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問