web-dev-qa-db-ja.com

Enterキーを押したときにモーダルを解除しないようにします

bootstrapモーダルをその中に設定しましたが、Enterキーを押すとモーダルが消えます。Enterを押したときにモーダルを解除しない方法はありますか？

Keyboard：falseでモーダルをアクティブにしようとしましたが、それはESCキーでの却下を防ぐだけです。

formstwitter-bootstrapmodal-dialog
101
Luke Morgan

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

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

入力フィールドでEnterキーを押すと、このボタンが起動します。代わりにアンカーに変更しましたが、今では期待どおりに動作します（enterはフォームを送信し、モーダルを閉じません）。

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

あなたのソースを見ることなく、私はあなたの原因が同じであることを確認することはできません。

114
vish

ボタン要素にtype = "button"属性を追加するだけで、一部のブラウザはタイプをsubmitデフォルトで。

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

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

<button type="button" class="close" data-dismiss="modal">×</button>
74
jcalonso

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

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

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

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

詳細情報： 単一のテキスト入力フィールドを持つブートストラップモーダルダイアログは、Enterキーで常に非表示

19
jpeskin

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

<div class="modal-footer">
    <button type="submit" class="btn primary">Login</button>
    <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
7
Ryan

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

<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>
4
Igor Lovrić

たった今同様の経験があり、それを解決する方法はタグを使用する代わりに、タグをtype = "button"のタグに変更しました。これにより、「Enter」キーを押してbootstrap=モーダルを無視するという問題を解決したようです。

3
wmock

私もこの問題を抱えており、この方法で解決しました。 onsubmitをフォームに追加しました。また、保存キーとしてEnterキーを使用できるようにしたかったため、onsubmitにsave_stuff（）javascriptを追加しました。 falseを返します。フォーム送信を防ぐために使用されます。

<form onsubmit="save_stuff(); return false;">
 ...
</form>

<script>
    function save_stuff(){
      //Saving stuff
    }
</script>
2
Firze