AngularJS - ng-keypress not working for enter event

Question

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.

It is not an event made for `div` you can try it on any input field like `textarea` or `textbox`. — Arpit Kumar, Nov 06 '17 at 10:48
He added tabindex for that div. hope it will work for div also.@ArpitMeena — Vijay Krishna, Nov 06 '17 at 10:50
Pass $event even though it is not working then Try **`ng-keyup`**, it is also behaves same like **`ng-keypress`** — Vijay Krishna, Nov 06 '17 at 10:54
I have added event code just to demonstrate the issue....just to check what I'm getting in the keycode — Rakesh Burbure, Nov 06 '17 at 11:53
The problem is it is blocking only Enter key. Rest all are working fine. — Rakesh Burbure, Nov 06 '17 at 11:54

score 2 · Accepted Answer · answered Mar 12 '18 at 11:42

2

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>

answered Mar 12 '18 at 11:42

Rakesh Burbure

1,045
12
27

So you did not solve the problem, you created another approach for project logic, please remove the true answer check from this answer this is misleading – Fardin Behboudi Oct 11 '18 at 09:48
But for me ng-keypress is not working in angular 1 for button tag also. – Nayana Chandran Jan 20 '21 at 20:09

score 0 · Answer 2 · answered Nov 06 '17 at 10:44

0

it could be because of another handler that invokes event.stopImmediatePropagation(): so far any other handlers are no called

you can check existing handlers for element in browser's Developer tools

answered Nov 06 '17 at 10:44

skyboyer

22,209
7
57
64

do you have any useful reference for this event.stopImmediatePropagation()? – Rakesh Burbure Nov 06 '17 at 13:30
@RakeshBurbure for sure https://developer.mozilla.org/ru/docs/Web/API/Event/stopImmediatePropagation – skyboyer Nov 06 '17 at 16:18
I'm not 100% sure since it sounds weird to prevent all others handlers from being called; also there is a different case: angular invokes "ng-click" handlers if Enter is pressed when button or link is focused - so stopImmediatePropagation(if it's the case) can be operated there – skyboyer Nov 06 '17 at 16:19
in Developer Tools for most browsers you can set up breakpoint for specific event: so create one for keypress event and see who is handling that – skyboyer Nov 06 '17 at 16:22

score 0 · Answer 3 · answered Nov 06 '17 at 10:45

0

You are using same function test() for both ng-click and ng-keypress, try to replace with another function

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

answered Nov 06 '17 at 10:45

Sajeetharan

216,225
63
350
396

1

Hi @Sajeetharan: I tried doing this also, but no luck. Do you know any scenario where the ng-keypress blocks Enter key, and allows other. In my project, at other places ng-keypress works correcrtly. But at some stage it wont respond to the enter key. – Rakesh Burbure Nov 06 '17 at 12:12
can you create a plunker – Sajeetharan Nov 06 '17 at 12:13

score 0 · Answer 4 · answered Jan 11 '18 at 14:07

I approached same issue with ngKeypress directive. It's especially interesting that on Angular's official example pressing 'Enter' is recognized.

Solved this problem using ngKeydown directive. It shouldn't make any difference when handling 'Enter' key.

AngularJS - ng-keypress not working for enter event

4 Answers4