☰

送信ボタンなしでEnterキーを押してフォームを送信する 質問する

tag-icon • tag-icon html forms submit
送信ボタンなしでEnterキーを押してフォームを送信する 質問する

Enter キーを押してフォームを送信しようとしていますが、送信ボタンが表示されません。すべてのブラウザですべてが機能するようにしたいので、できれば JavaScript には関わりたくありません (私が知っている唯一の JS の方法はイベントを使用することです)。

現在、フォームは次のようになっています。

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>

これはかなりうまく機能します。送信ボタンはユーザーが Enter キーを押すと機能し、Firefox、IE、Safari、Opera、Chrome ではボタンが表示されません。ただし、すべてのプラットフォームのすべてのブラウザで機能するかどうかは不明なので、このソリューションはまだ気に入りません。

もっと良い方法を提案できる人はいますか? それとも、これが最善でしょうか?

ベストアンサー1

2022年更新: 代わりにこれを使用してください

<input type="submit" hidden />
お知らせ - 古い回答
position: absolute2021 年以降は使用しないでください。hidden代わりに属性を使用することをお勧めします。それ以外の場合は、下を見て、より適切な、より現代的な回答を選択してください。

試す：

<input type="submit" style="position: absolute; left: -9999px"/>

こうすると、ボタンが画面からかなり左に押し出されます。これの良いところは、CSS が無効になっているときに、適切に劣化が進むことです。

アップデート - IE7 の回避策

Bryan Downing の提案に従って、tabindexタブがこのボタンに到達しないようにします (Ates Goral による):

<input type="submit" 
       style="position: absolute; left: -9999px; width: 1px; height: 1px;"
       tabindex="-1" />

おすすめ記事