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>

stackoverflow.com/questions/3149362/…

Teemu
– Teemu

2015-04-13 17:20:13 +00:00
Commented Apr 13, 2015 at 17:20 — Teemu
– Teemu, Commented Apr 13, 2015 at 17:20

mohamedrias · Accepted Answer · 2015-04-13 17:46:18Z

1

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

edited Apr 13, 2015 at 17:46

answered Apr 13, 2015 at 17:39

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

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

3 Comments

Raihan Over a year ago

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

mohamedrias Over a year ago

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

Raihan Over a year ago

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. plnkr.co/edit/UJsyEyegb5FCCjnho3Oc?p=preview What I am doing wrong here

Petr Averyanov · Accepted Answer · 2015-04-13 17:33:44Z

1

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.

answered Apr 13, 2015 at 17:33

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

Collectives™ on Stack Overflow

Trouble implementing keyboard action

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related