CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-directivekeypress
bitfidget
bitfidget

Reputation: 357

angular.js listen for keypress as shortcut for button

My first ever angular application is a pretty basic survey tool. I have multiple choice questions, with a button for each answer and a basic function that logs each answer on button click like this:

ng-click="logAnswer(answer.id)"

What I'm looking for is to be able to add a keypress event to the document that will listen for a keyboard response of 1, 2, 3, 4, 5 which matches up with the button choices and calls the same function.

In searching around I can only find responses that relate to keypresses once a particular input field has focus, which doesn't help me. I did find the OPs response on this post Angular.js keypress events and factories which seems to be heading in the right direction, but I just can't work out how I get his directive to call my function.

I've included the directive in my js:

angular.module('keypress', []).directive('keypressEvents', 
  function($document, $rootScope) {
    return {
      restrict: 'A',
      link: function() {
        $document.bind('keypress', function(e) {
           $rootScope.$broadcast('keypress',e , String.fromCharCode(e.which));
        });
     }
   }
})

but I'm not sure how I make use of the keybinding object within my controller:

function keyedS(key, parent_evt, evt){
      // key is the key that was pressed
      // parent_evt is the keypress event
      // evt is the focused element object
}
$scope.keyBindings = {
    's': keyedS
}

How do I make the keybinding object listen for the keys I'm listening for and fire-off the function that I need?

thanks

Upvotes: 9

Views: 22646

Answers (5)

georgeawg
georgeawg

Reputation: 48968

function on specific keypress/keydown

Is is possible to call a function only when a specific key is pressed, like the spacebar? I've looked into ngKeydown

<input ng-keydown="function()">

But this will call the function on every keypress, is it possible to see what key was pressed, maybe within the function?

Use the $event object exposed by the ng-keydown directive.

 <input ng-keydown="fn($event)">

JS

 $scope.fn = function (event) {
     $scope.keyCode = event.keyCode;
     if (event.keyCode == 32) {
         console.log("spacebar pressed");
     };
 });

The DEMO on PLNKR

For more information on the $event object, see AngularJS Developer Guide - $event

Upvotes: 1

Christian Bonato
Christian Bonato

Reputation: 1306

Someone already created a specific Keyboard shortcuts AngularJS module, have a look :

https://github.com/chieffancypants/angular-hotkeys#angular-hotkeys-

Upvotes: 1

rageandqq
rageandqq

Reputation: 2291

If you insist on using AngularJS to detect the keypress event, ngKeypress is what you want to use.

<!-- you can, for example, specify an expression to evaluate -->
<input ng-keypress="count = count + 1" ng-init="count=0">

<!-- or call a controller/directive method and pass $event as parameter.
     With access to $event you can now do stuff like 
     finding which key was pressed -->
<input ng-keypress="changed($event)">

You can check out the documentation for ngKeypress for more information. You might also want to check out the ngKeydown and ngKeyup directives.

Upvotes: 1

Jim Kennelly
Jim Kennelly

Reputation: 67

Take a look at the ngKeyup directive. Description of ngKeyUp

Use an array of functions for the various functions you need based on the keypress

Upvotes: 0

Jorg
Jorg

Reputation: 7250

Catch the event emitted by the rootscope in your controller:

$rootScope.$on('keypress', function (e, a, key) {
    $scope.$apply(function () {
        $scope.key = key;
    });
})

key is then yours to use in the controller.

Here's a fiddle

Upvotes: 13

Related Questions