1. ホーム
  2. ハイパーリンク

[解決済み】送信ボタンがないのにEnterキーを押してフォームを送信する

2022-04-14 18:42:35

質問

さて、私はエンターキーを押してフォームを送信しようとしていますが、送信ボタンは表示されません。すべてのブラウザで動作するようにしたいので、できれば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ではボタンが表示されないのです。しかし、すべてのプラットフォームとすべてのブラウザーで動作するかどうかが分からないので、私はこの解決策がまだ好きではありません。

どなたか良い方法をご提案いただけないでしょうか?それともこれくらいでいいのでしょうか?

どのように解決するのですか?

アップデート2022: 代わりにこれを使う

<input type="submit" hidden />


<テーブル お知らせ - 古い回答 は使用しないでください。 position: absolute を2021年以降に使用する場合。を使用することが推奨されています。 hidden 属性で代用できます。そうでなければ、下を見て、より良い、より現代的な答えを選んでください。

試してみてください。

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

これでボタンは画面の外に出て、左側に押し出されます。この方法の良いところは、CSSを無効にしたときに、劣化を緩やかにすることができる点です。

更新 - IE7での回避策

Bryan Downingの提案の通り + with tabindex で、このボタンにタブが到達しないようにする(Ates Goral氏)。

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