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

Question

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?

Langdon · Accepted Answer · 2013-04-19 16:42:06Z

8

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()'}"

http://www.w3schools.com/jsref/event_onkeypress.asp

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.

answered Apr 19, 2013 at 16:42

Langdon

20.1k18 gold badges90 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related