Trouble implementing keyboard action

Question

I have a stack of Divs. I can navigate them with my two buttons (Show next or previous card ) by clicking. Thanks dfsq for helping me this far. But I am trying to add keyboard action side by side with mouse click.

Currently Clicking "Next" button shows next item and "previous" shows previous item(if any). Plunker

How I can add something like pressing keyboard "Right arrow" will do same as clicking Next button and pressing keyboard "Left arrow" will do same as clicking previous button.

I search how to do this but nothing effective I got yet. I see This which is kind of what I was expecting but didn't get how I can implement.

Any Solution / suggestions / Examples will be highly appreciated

<div class="container">
        <div class="col-md-2-4" 
            ng-class="{'card-hide': index  > $index + 1}"
            ng-repeat="card in cards" 
            ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}">

            <ul class="list-unstyled cs-tag-item-grp">
                <li class="clearfix" ng-repeat="value in card.cardItem">
                    <div class="pull-left">
                        {{value.keys}}
                    </div>
                </li>
            </ul>
        </div>
        <div class="keys">
          <button type="button" class="btn btn-next" ng-click="index = index < cards.length ? index + 1 : cards.length">Next</button>
          <button type="button" class="btn btn-pre" ng-click="index = index > 1 ? index - 1 : 1">Previous</button>
          {{index}}
        </div>
    </div>

http://stackoverflow.com/questions/3149362/capture-key-press-or-keydown-event-on-div-element — Teemu, Apr 13 '15 at 17:20

score 1 · Answer 1 · answered Apr 13 '15 at 17:33

Do not use jquery, using ng-keydown is quite easy:

<div class="keys"  ng-keydown="foo($event)">

In js:

$scope.foo = function(e) {
  if (e.which == 37) {
    $scope.index = ($scope.index < $scope.cards.length) ? ($scope.index + 1) : $scope.cards.length;
  } else if (e.which == 39) {
    $scope.index = $scope.index > 1 ? $scope.index - 1 : 1;
  }
};

However this will work when that div get focus. See plunk: http://plnkr.co/edit/dMSQkk6mMU8Ge9nRGekv?p=preview When you launch it pressing arrows make nothing, now press i.e. 'next': button get focus, so does containing div and you can use arrows.

mohamedrias · Accepted Answer · 2015-04-13T17:46:18.600

Add it to your controller or create a directive and add it to the link function:

angular.element(document).bind("keydown", function(event){    
      var key = event.which;
              switch(key) {
                case 37:
                    $scope.index = $scope.index > 1 ? $scope.index - 1 : 1;
                    $scope.$apply();
                    break;
                case 39:
                    $scope.index = $scope.index < $scope.cards.length ? $scope.index + 1 : $scope.cards.length
                    $scope.$apply();
                    break;
          }   
    });

DEMO

Directive Code:

app.directive("trackKeyDown", function () {
    return {

        restrict: "AEC",
        link: function ($scope, element, attrs) {

            angular.element(document).bind("keydown", function (event) {
                var key = event.which;
                switch (key) {
                    case 37:
                        $scope.index = $scope.index > 1 ? $scope.index - 1 : 1;
                        $scope.$apply();
                        break;
                    case 39:
                        $scope.index = $scope.index < $scope.cards.length ? $scope.index + 1 : $scope.cards.length
                        $scope.$apply();
                        break;
                }
            });

        }
    }

});

In your HTML:

<body ng-controller="MainCtrl" track-key-down>

DEMO with Directive

This is really cool. Is this possible do same without focusing the button first ? I see I have focus any button first to work keyboard action — Raihan, Apr 13 '15 at 17:48
No, you need not focus on any button. because we;ve bound the event on document. Just the user need to have focus on that page. Not necessarily the button — mohamedrias, Apr 13 '15 at 17:50
I added an extra button for delete so clicking on delete it's removing cards one by on.So I follow yours and added key action "down arrow" for deleting card but looks like not working. http://plnkr.co/edit/UJsyEyegb5FCCjnho3Oc?p=preview What I am doing wrong here — Raihan, Apr 13 '15 at 18:18

Trouble implementing keyboard action

2 Answers2