Prevent ng-click action on hitting enter

Question

I have written a timepicker directive, where I can enter the time and if I hit Enter the value will be formatted in a specific time format. Also the input will be blur. That all works fine.

The problem is that I also have some buttons in the form with the ng-click directive. And if I hit Enter, the action of the ng-click directive will also be called. Although I run e.preventDefault();

This is the code of my directive:

$element.keyup(function(e) {   var keyCode = e.keyCode || e.witch;    if (keyCode == 13) {     $element.blur();      // Do some more stuff here     e.preventDefault();     return false;   } }); 

And the HTML code:

<button class="btn btn-default" ng-click="openModal()">   <i class="icon-info-sign"></i> </button> 

The funny thing is that the timepicker directive works as expected and additional the openModal() function will be called. How do I prevent this?

Answer 1

Your button needs a type="button". By default it is type="submit" which is why it is being called as the form submits.

It also looks like you need to prevent form submission when you press enter, but that's a different problem.