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.

I like this question. Why not just edit the plugin's source code? — Ryan, May 01 '12 at 16:17
I'll take a look into that, if I find something useful I'll edit. In the meantime, I hope someone knows the answer. — Luke Morgan, May 01 '12 at 16:25
I changed from click.dismiss.modal to keyup, it seems fine, I'll check again later to see if I screwed up something else — Luke Morgan, May 01 '12 at 16:54
Yup, that screwed up the buttons (I added an onclick="$('#signinModal').modal('hide');" to avoid those problems, now everything is fine, it seems) — Luke Morgan, May 01 '12 at 19:51

score 127 · Accepted Answer · answered May 01 '12 at 22:07

127

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.

answered May 01 '12 at 22:07

vish

2,436
1
24
20

No, no buttons used, I used the 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 – Luke Morgan May 02 '12 at 10:54
I didn't see the button on the upper right hand corner, that was the problem. Now it works fine, thanks! – Luke Morgan May 02 '12 at 12:52
+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. – Andrew Jan 29 '13 at 16:23
8

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. – jpeskin Mar 06 '13 at 03:15
12

one may use type="button" on the cancel button – Muayyad Alsadi Mar 14 '13 at 10:24
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` – Dennis Mar 04 '14 at 19:59
Thank you so much for this. – Leah Sapan Jun 30 '15 at 15:16
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. – ScubaSteve Nov 05 '15 at 01:40
This answer works only in some scenarios. When there is only one element it will fail independently of having – coterobarros Oct 16 '21 at 11:22

score 84 · Answer 2 · edited May 10 '16 at 19:57

84

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>

edited May 10 '16 at 19:57

ohcibi

2,518
3
24
47

answered Jul 21 '12 at 10:32

jcalonso

1,473
13
19

score 21 · Answer 3 · edited May 23 '17 at 12:17

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

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! — Darren Parker, Apr 06 '16 at 19:20

score 9 · Answer 4 · answered Aug 21 '14 at 07:53

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>

score 8 · Answer 5 · edited Jun 13 '15 at 15:01

8

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>

edited Jun 13 '15 at 15:01

Ahmad Ahmadi

337
1
4
19

answered May 10 '12 at 16:08

Ryan

89
1

7

Cancel should not be type submit – Manatax Jul 31 '15 at 19:21

score 3 · Answer 6 · answered Jun 07 '14 at 05:13

3

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.

answered Jun 07 '14 at 05:13

wmock

5,382
4
40
62

score 2 · Answer 7 · answered Apr 24 '14 at 11:42

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>

score 0 · Answer 8 · answered Mar 10 '23 at 08:42

0

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.

answered Mar 10 '23 at 08:42

PEELY

1,183
1
11
21

Avoid modal dismiss on enter keypress

8 Answers8

Linked

Related