CODEWITHSUNDEEP
javascriptangularjsbinding
Djomla
Djomla

Reputation: 616

AngularJS prevent modal open on Enter key

I have one problem with modal window.

I have couple section and in one section ( which is hidden ) I have button with ng-click='function()'.

<section class='hidden'>
  <button class="mobileUpdate" ng-click="openMobileUpdateModal()">SMS</button>
</section>

openMobileUpdateModal() open modal dialog. Problem is when I hit enter key on any input field in form it opens me modal window.

Any idea how to prevent this?

Thanks

Upvotes: 1

Views: 1897

Answers (3)

Lijo
Lijo

Reputation: 6778

Please add button type to the model dialog button .

 <section class='hidden'>
  <button class="mobileUpdate" type="button" ng-click="openMobileUpdateModal()">SMS</button>
</section>

In form if we have any button enter click on input field will trigger the click event of the button. So always add type="button" to all the buttons in the form other than submit Button

<form>

 Name  <input type="text"/>

 <button type="button">open model</button>

 <button type="submit">Submit Form </button>
</form>

Upvotes: 1

gkalpak
gkalpak

Reputation: 48212

Quoting the docs on form/ngForm:

You can use one of the following two ways to specify what javascript method should be called when a form is submitted:

  • ngSubmit directive on the form element
  • ngClick directive on the first button or input field of type submit (input[type=submit])

[...]
...the following form submission rules in the HTML specification:

  • If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)
  • if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit
  • if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)

So, depending on the rest of your setup, you could solve the problem by changing the order of buttons, by detecting and filtering key-events, by introducing additional form elements etc.

Upvotes: 3

chandu
chandu

Reputation: 2276

in your openMobileUpdateModal() function place the if condition to detect the key event. if the pressed key value is 13(enter key) return from the function else continue the function.

Upvotes: 0

Related Questions