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.

Answer 1

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>

Answer 2

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

Answer 3

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>

Answer 4

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.

Answer 5

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>

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.