[解決済み】送信ボタンがないのに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" />
関連
-
[解決済み] IE=edge,chrome=1というのは今でも有効なのでしょうか?
-
[解決済み] フォーム送信のようなJavaScriptのポストリクエスト
-
[解決済み] jQuery AJAX送信フォーム
-
[解決済み] jQueryの送信ボタンの無効化・有効化
-
[解決済み] ユーザーがEnterキーを押してフォームを送信できないようにする
-
[解決済み] 1つのフォームに2つの送信ボタンがある
-
[解決済み] jQueryで'Enter'でフォームをサブミット?
-
[解決済み] AngularJSでEnterキーを押したときにフォームを送信する
-
[解決済み】HTMLフォームのデフォルトの送信ボタンはどのように決定されるのでしょうか?
-
[解決済み] フォームを送信するために通常のリンクを使用する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】エラー。要求されたURL"[no URL]"は無効です。
-
[解決済み】「選択されたファイルがありません」を変更しました。
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] SRCとHREFの違い
-
[解決済み] WebForms UnobtrusiveValidationMode には、'jquery' の ScriptResourceMapping が必要です。jquery という名前の ScriptResourceMapping を追加してください(大文字と小文字を区別します)。
-
[解決済み] Favicon.icoを表示させることができません。
-
[解決済み] フッターの内容が重なっているのを修正するには?
-
[解決済み] Bootstrap 4 の mr-auto が正しく動作しない。
-
[解決済み] HTMLのバックスペース
-
[解決済み] AngularJSでEnterキーを押したときにフォームを送信する