CODEWITHSUNDEEP
angularjsangular-ui
iamjonesy
iamjonesy

Reputation: 25122

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

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?

Upvotes: 1

Views: 4538

Answers (1)

Langdon
Langdon

Reputation: 20053

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.

Upvotes: 8

Related Questions