Angular UI ui-keypress doesn’t work with down key

Problem

I’m trying to get angular-ui ui-keypress to call a function when the down key is pressed. From what I’ve found the down key is code number 40. However I’m unable to trigger the event.

If you look at this jsfiddle which triggers a function on the ENTER keypress (try enter or even 13). But if you change that to 40 it doesn’t work. http://jsfiddle.net/jayrmotta/NbjZL/70/

<!DOCTYPE html>
<html ng-app="myModule" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Main</title>
</head>
<body ng-controller="Ctrl">
<button ng-click="add()">Add</button>
<input type="text" ui-keypress="{40: 'add()'}" />
{{item}}
</body>
</html>


var myModule = angular.module('myModule', ['ui.directives']);
function Ctrl($scope) {
$scope.item = "";

$scope.add = function () {
$scope.item = "Item Added";
}
}

Do I have the wrong code or can any tell me what’s wrong?

Problem courtesy of: iamjonesy

Solution

The JavaScript keypress event won't fire for up, down, left, or right. You want to use keyup or keydown instead. In your case, you want: ui-keyup="{40: 'add()'}"

Note: The onkeypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers. To detect only whether the user has pressed a key, use the onkeydown event instead, because it works for all keys.

Solution courtesy of: Langdon

View additional discussion.