How can I wire up a button on my page so that it is clicked when a user presses enter?

Question

I have many buttons on my page but none are inside a form. I already assigned one button and changed its color so it shows as a bootstrap primary button.

How can I make it so that when a user is on the page and they click enter then the button click event for that button is called?

Looks like this has what you need, http://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript — Joshua Ohana, Feb 27 '15 at 20:31

score 1 · Accepted Answer · answered Feb 27 '15 at 20:35

I am not sure about what you are asking; but you can do the following, if you have a controller with the function add() attached to the scope:

<form ng-submit="add()">
  <input type="text" ng-model="myModel">
  <input type="submit" value="Add"/>
</form>

The above adds the value entered in the input to the model.

score 0 · Answer 2 · answered Feb 27 '15 at 20:34

0

I suggest using a <form ...> around your elements. Because if you rely on a custom keypress detector, and you have more than one button, it will activate all of them. The <form ...> dictates which button is to be submitted when a user is in a particular input field and hits Enter.

Your form doesn't even need to have an action="..." or method="...". You could just as well use ng-submit="yourFormParser()".

answered Feb 27 '15 at 20:34

ngDeveloper

1,304
2
16
34

Can you give an example so I can see what you mean. Would it be okay to just put a dive with ng-form ? – Alan2 Feb 27 '15 at 20:35
@Alan Sorry I never responded to you, I don't visit here frequently. But the example would like exactly as user3681587 suggested. – ngDeveloper Mar 13 '15 at 17:31

score 0 · Answer 3 · answered Feb 27 '15 at 21:04

ng-submit will not useful to you, because your form submit event is different.

The only option remains is, you can take use of ng-enter directive, but you should manually bind it wherever you want. I believe this is last option.

ng-enter="myEvent()"

HTML

<input type="text/url/email/number/checkbox/radio" ng-model="test" ng-enter="myEvent()"/>

Hope this could help you, Thanks.

How can I wire up a button on my page so that it is clicked when a user presses enter?

3 Answers3