Enterキーを押したときのモーダル解除を避ける

私はその中にフォームを持つブートストラップモーダルを設定しましたが、私はEnterキーを押すとモーダルが解除されることに気がつきました。 Enterキーを押したときにそれを解除しない方法はありますか？Enterキーを押したときのモーダル解除を避ける

私はキーボードでモーダルを起動しようとしました：偽ですが、それはESCキーでの解雇を防ぎます。

出典

2012-05-01 Luke Morgan

私はこの質問のように。なぜプラグインのソースコードを編集しないのですか？ –

私はそれを見て、私が何か有用なものを見つけたら編集します。その間、誰かが答えを知りたがります。 –

click.dismiss.modalからkeyupに変更しました。これはうまくいきました。後でもう一度チェックして、別のものを壊してしまったかどうかを確認します。 –

103

私もこの問題を抱えていました。
私の問題は、私は、入力フィールドに入力したキーを押す私のモーダル

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

に閉じるボタンを持っていた、このボタンを起動させたということでした。私は代わりにアンカーに変更し、今は期待どおりに動作します（フォームを送信し、モーダルを閉じることはありません）。

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

ソースが表示されていないと、あなたの原因が同じであることは確認できません。

出典

2012-05-01 22:07:54 vish

いいえ、ボタンは使わず、私はアイテムを使っていました。私が使用しているコードは、基本的にブートストラップページのサンプルコードです。内部にフォームが追加されています。 –

右上のボタンが表示されませんでした。今それは正常に動作します、ありがとう！ –

+1、優秀な発見！誰かがこれをブートストラップ問題トラッカーに入れてしまったのだろうか？私は現時点で確認するのが面倒です。たぶん昼食後。 – Andrew

キャンセルボタンの前にログインボタンを置くことができます。これにより、問題が解決します。 はデフォルトでを提出するよう

<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-10 16:08:08 Ryan

キャンセルは入力しないでください – Manatax

これは問題を解決しません – DvdEnde

ジャストボタン要素にタイプ=「ボタン」属性を追加し、一部のブラウザでは、タイプを解釈します。

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

これは、あなたがモーダルで持っているすべてのボタンに適用されます。

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

出典

2012-07-21 10:32:16 jcalonso

これは簡単で明瞭で、私には大きな頭痛を蓄えました – DerekH

これは...素晴らしい答えです。 – Leprosy

偉大な答え!!!! –

ブートストラップモードからすべてのボタンを削除してもこの問題が発生していたので、ここでは解決できませんでした。

キーボードのフォーカスがテキストフィールドにあるときにEnterキーを押すと、1つのテキストフィールドを持つフォームがフォーム提出を行い、結果が表示されないことが判明しました。これは、Bootstrapのものよりブラウザ/フォームの問題のほうが多いようです。

私の解決策は、あなたが実際に提出するイベントを使用しているが、私はむしろ、AJAX要求を生成JSフレームワークを使用している場合、これは問題かもしれ=が

を「falseを返す」ONSUBMITして、フォームのonSubmit検証属性を設定することでした

ブラウザの送信よりも、私は完全に送信を無効にすることをお勧めします。（これは、送信をトリガーする可能性のあるすべてのフォーム要素を手動で微調整する必要もないことを意味します）。ここ

さらに詳しい情報：Bootstrap modal dialogs with a single text input field always dismiss on Enter key

出典

2013-03-06 20:36:37 jpeskin

私は既に 'type =" button "'をすべての閉じる/キャンセルボタンに持っていましたが、私のモーダルを閉じるEnterキーでこの問題が残っていました。私はモーダルに1つの入力テキストフィールドしか持っていなかったので、あなたの解決策はそれを修正しました。ご回答有難うございます！ –

私もこの問題を抱えていたし、私はそれをこのように解決しました。私はフォームに追加して投稿しました。 Enterキーを保存キーとして使用できるようにしたいので、save_stuff（）javascriptをonsubmitに追加しました。偽を返します。フォームの送信を防ぐために使用されます。

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

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

出典

2014-04-24 11:42:04 Firze

私はちょうど今、似たような経験を持っていたし、私はそれが代わりにタグを使用してあった解決方法は、私はタイプ=「ボタン」とタグにタグを変更しました。これは、 "enter"キーを押し、ブートストラップモーダルを解除するという問題を解決するように思われました。

出典

2014-06-07 05:13:02 wmock

私は同じ問題を抱えていた、と私は

<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-21 07:53:06

Enterキーを押したときのモーダル解除を避ける

答えて

関連する問題