Avoid modal dismiss on enter keypress

Question

I have set up a bootstrap modal with a form inside it, I just noticed that when I press the Enter key, the modal gets dismissed. Is there a way not to dismiss it when pressing Enter?

I tried activating the modal with keyboard:false, but that only prevents dismissal with the ESC key.

Shadoof

I like this question. Why not just edit the plugin's source code? – Externalism

I'll take a look into that, if I find something useful I'll edit. In the meantime, I hope someone knows the answer. – Shadoof

I changed from click.dismiss.modal to keyup, it seems fine, I'll check again later to see if I screwed up something else – Shadoof

Yup, that screwed up the buttons (I added an onclick="$('#signinModal').modal('hide');" to avoid those problems, now everything is fine, it seems) – Shadoof

Answer 1

I just had this problem too.
My problem was that i had a close button in my modal

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

Pressing enter in the input field caused this button to be fired. I changed it to an anchor instead and it works as expected now (enter submits the form and does not close the modal).

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

Without seeing your source, I can't confirm that your cause is the same though.

Canicula

No, no buttons used, I used the <a> items, I guess it's something else. The code I use is basically the sample code on the bootstrap page, just with a form added inside – Shadoof

I didn't see the button on the upper right hand corner, that was the problem. Now it works fine, thanks! – Shadoof

+1, Excellent find! I wonder if anyone has put this in the bootstrap issue tracker? I'm too lazy to check at the moment. Maybe after lunch. – Caylor

This is not just a button issue. I have removed all buttons from my modal (including the upper right "x"), but if I have a single form text field, hitting Enter will dismiss the dialog. Strangely it's only a problem when there is a single text field. Once I have two, Enter does not dismiss the model no matter which field has the focus. – Absinthism

one may use type="button" on the cancel button – Bathrobe

If you also have a cancel/close button, change it to an anchor. E.g. in HAML %a.btn.btn-default{'data-dismiss' => 'modal', 'aria-hidden' => 'true'} Cancel – Remand

I am still having this issue even when using anchors. But only when I have a singular textbox in the form. If I have more than one, everything works correctly. With one, it submits (as it should), then after submitting, closes the modal and tries to submit the form via GET. – Axe

This answer works only in some scenarios. When there is only one <input> element it will fail independently of having <button> or <a>. See #15239736 – Chaldean

Answer 2

Just add the type="button" attribute to the button element, some browsers interpret the type as submit by default.

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

This applies for all the buttons you have in the modal.

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

Ardys

Answer 3

I had this problem even after removing ALL buttons from my Bootstrap Modal, so none of the solutions here helped me.

I found that a form with a single text field would cause the browser to do a form submit (and result in dismiss), if you hit Enter while keyboard focus is on the text field. This seems to be more of a browser/form issue than anything with Bootstrap.

My solution was to set the form's onsubmit attribute to onsubmit="return false"

This may be a problem if you are actually using the submit event, but I'm using JS frameworks that generate AJAX requests rather than doing a browser submit, so I prefer disabling submit entirely. (It also means I don't have to manually tweak every form element that might trigger a submit).

More info here: Bootstrap modal dialogs with a single text input field always dismiss on Enter key

Absinthism

I already had type="button" on all my close / cancel buttons, but still had this problem with enter key closing my modal. I had just 1 input text field in my modal, and your solution fixed it. Thanks for your answer! – Stonyhearted

This should be the accepted answer. Thanks – Chaldean

Answer 4

I had same problem, and i solved it with

<form onsubmit="return false;">

but there is one more solution, you can add dummy invisible input, so your form would look like this:

<form role="form" method="post" action="submitform.php">
    <input type="text" id="name" name="name" >
    <input type="text" style="display: none;">
</form>

Gracia

Answer 5

You can put the login button before the cancel button and this would solve the issue you are having as well.

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

Externalism

Cancel should not be type submit – Ottava

Answer 6

I had a similar experience just now and the way I solved it was instead of using a tag, I changed the tag to an tag with type="button". This seemed to solve the problem of pressing the "enter" key and dismissing the bootstrap modal.

Atomicity

Answer 7

I had this problem too and I solved it this way. I added onsubmit to form. I also wanted to be able to use enter key as a saving key so I added save_stuff() javascript to onsubmit. return false; is used to prevent the form submit.

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

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

Acknowledgment

Answer 8

For me it was simpler: I had submit and cancel buttons that were outside the scope of the form, and hitting enter on the modal dismissed the model rather than submitted it.

Heir