AngularJS – ng-keypress not working for enter event

In my project, ng-keypress is not working for Enter Key from all the places. From some places, it is working perfectly fine but from other places, it is working for all the keys except Enter Key.

Here I’m calling a test() method on the ng-keypress.

<div class="actions">
    <div class="ui approve button red" data-ng-click="test()" id="confirm-yes" tabindex="8" ng-keypress="test()">Yes</div>
    <div class="ui cancel button" data-ng-click="test()" id="confirm-no" tabindex="7" ng-keypress="test()">Cancel</div>
</div>

From test method, I’m just showing the key code. I could see the keycode properly for all other key presses except Enter.

$scope.test = function () { 
            alert('test called'+event.keyCode);
        }

I have gone through many Stack Overflow articles and I’m sure its syntax is correct, but I’m totally confused about its strange behavior.

Any idea why ng-keypress is not working for entering and it is working for all other keys.

Answer

Finally I had to replace <div> tag with the <button> tag to solve this issue. Button tag worked perfectly for this issue.

<div class="actions">
    <button class="ui approve button red" data-ng-click="test()" id="confirm-yes" tabindex="8" ng-keypress="test()">Yes</button>
    <button class="ui cancel button" data-ng-click="test()" id="confirm-no" tabindex="7" ng-keypress="test()">Cancel</button>
</div> 

Leave a Reply

Your email address will not be published. Required fields are marked *