Is it possible to listen for arrow keyspress using ng-keypress?

Question

I'm trying to create an interaction similar to the konami code "up,up,down,down,a,b,a,b, enter" -> something happens.

Is it possible to listen for arrow keyspress using ng-keypress? it seems to not work?

html:

input( ng-keypress='changed($event)'  )

Js

$scope.changed = (evt) ->
    console.log(evt)

this will not log out arrow key events?

Do I have to roll out my own listeners on the window? if so how can I achieve this in angular?

i created [demo](http://jsfiddle.net/ve49dc0r/) and its working fine. — Darshan P, Aug 23 '14 at 17:44
i'm trying to detect the arrow keys. it does work well but how do you detect when someone pushes the up arrow from the input field — Armeen Moon, Aug 23 '14 at 17:48

Darshan P · Accepted Answer · 2014-08-23T19:08:44.587

22

DEMO

$scope.key = function($event){
    console.log($event.keyCode);
    if ($event.keyCode == 38)
        alert("up arrow");
    else if ($event.keyCode == 39)
        alert("right arrow");
    else if ($event.keyCode == 40)
        alert("down arrow");
    else if ($event.keyCode == 37)
        alert("left arrow");
}

EDIT

Change it from ng-keypress to ng-keydown. DEMO

<input ng-keydown="key($event)" />

edited Aug 23 '14 at 19:08

answered Aug 23 '14 at 18:55

Darshan P

2,241
18
16

2

Interestingly I'm getting no alerts while using google chrome? it works on firefox lol? – Armeen Moon Aug 23 '14 at 19:03
will mark it correct regardless but do you know how to make the keyCodes cross browser? – Armeen Moon Aug 23 '14 at 19:04
I tested on firefox so let me try on chrome. – Darshan P Aug 23 '14 at 19:05
Hi, any idea why I'm getting the wrong values in my keyCode :( http://stackoverflow.com/questions/30128431/keycode-displaying-incorrect-code-value-in-angularjs – Leon Gaban May 08 '15 at 16:19
AH so it was that `keypress` was deprecated, we're suppose to use `keyup` now. – Leon Gaban May 08 '15 at 16:32

score 1 · Answer 2 · answered Aug 23 '14 at 19:09

You could use a custom directive to listen for keydown and keypressed events. A possible implementation that i have tested is the following:

var app = angular.module('app', []);

// a helper service to detect the arrow keys from the key codes
app.factory('keys', function() {
    var keysEnum = { left: 37, up: 38, right: 39, down: 40 };
    var theKeys =  [ keysEnum.left, keysEnum.up, keysEnum.right, keysEnum.down ];
    function isIn(val) {
        var isin = false
        if (theKeys.indexOf(val) >= 0) {
            isin = true;
        }
        return isin;
    }
    function keyFromCode(code) {
        var key = 'unknown';
        switch (code) {
            case 37:
                key = 'left';
                break;
            case 38:
                key = 'up';
                break;
            case 39:
                key = 'right';
                break;
            case 40:
                key = 'down';
                break;
        }
        return key;
    }
    return {
        isIn: isIn,
        keyFromCode: keyFromCode
    };
});

// custom directive to detect the arrow key pressed
app.directive('keypressed', [ 'keys', function (keys) {
    return function (scope, element, attrs) {
        // listen for the events keydown, keypress
        element.bind("keydown keypress", function (event) {
            var code = event.which;
            // if an arrow key is pressed then do something
            if(keys.isIn(code)) {
                console.log(keys.keyFromCode(code));
            }
        });
    };
}]);

You could use the above directive like this:

<span ng-app="app">
    <input keypressed />
</span>

From the code that you posted it seems that you use an html template engine so in your case you could use the directive like this:

input( keypressed )

Is it possible to listen for arrow keyspress using ng-keypress?

2 Answers2

Linked