Avoid modal dismiss on enter keypress

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.


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>

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