112

内部にフォームを含むブートストラップ モーダルを設定しましたが、Enter キーを押すとモーダルが閉じられることに気付きました。Enterキーを押したときに閉じないようにする方法はありますか?

keyboard:false でモーダルを有効にしようとしましたが、ESC キーでの解除しかできません。

4

7 に答える 7

125

私もこの問題を抱えていました。
私の問題は、モーダルに閉じるボタンがあることでした

<button class="close" data-dismiss="modal">&times;</button>

入力フィールドで Enter キーを押すと、このボタンが起動されました。代わりにアンカーに変更したところ、期待どおりに機能するようになりました（入力してフォームを送信し、モーダルを閉じません）。

<a class="close" data-dismiss="modal">&times;</a>

あなたのソースを見ないと、あなたの原因が同じであることを確認できません.

于 2012-05-01T22:07:54.033 に答える
82

type = "button"属性をbutton要素に追加するだけで、一部のブラウザはタイプをデフォルトで送信として解釈します。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes

これは、モーダルにあるすべてのボタンに適用されます。

<button type="button" class="close" data-dismiss="modal">×</button>
于 2012-07-21T10:32:16.603 に答える
21

Bootstrap Modalからすべてのボタンを削除した後でもこの問題が発生したため、ここでの解決策はどれも役に立ちませんでした。

キーボードフォーカスがテキストフィールドにあるときにEnterキーを押すと、単一のテキストフィールドを持つフォームにより、ブラウザーがフォームの送信を実行する（そして結果として却下される）ことがわかりました。これは、Bootstrapの何よりもブラウザ/フォームの問題のようです。

私の解決策は、フォームのonsubmit属性をonsubmit ="returnfalse"に設定することでした。

これは、実際に送信イベントを使用している場合は問題になる可能性がありますが、ブラウザーの送信ではなくAJAXリクエストを生成するJSフレームワークを使用しているため、送信を完全に無効にすることをお勧めします。（これは、送信をトリガーする可能性のあるすべてのフォーム要素を手動で微調整する必要がないことも意味します）。

詳細はこちら：単一のテキスト入力フィールドを備えたブートストラップモーダルダイアログは、Enterキーで常に閉じます

于 2013-03-06T20:36:37.780 に答える
8

キャンセル ボタンの前にログイン ボタンを配置すると、問題も解決します。

<div class="modal-footer">
    <button type="submit" class="btn primary">Login</button>
    <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
于 2012-05-10T16:08:08.703 に答える
8

私は同じ問題を抱えていました、そして私はそれを解決しました

<form onsubmit="return false;">

しかし、もう1つの解決策があります。ダミーの非表示入力を追加できるため、フォームは次のようになります。

<form role="form" method="post" action="submitform.php">
    <input type="text" id="name" name="name" >
    <input type="text" style="display: none;">
</form>
于 2014-08-21T07:53:06.433 に答える
3

私は今、同様の経験をしましたが、それを解決する方法は、タグを使用する代わりに、タグを type="button" のタグに変更しました。これにより、「Enter」キーを押してブートストラップモーダルを閉じるという問題が解決したようです。

于 2014-06-07T05:13:02.810 に答える