Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 533
bitfidget Avatar asked Jul 08 '14 00:07

bitfidget


4 Answers

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

like image 148
Jorg Avatar answered Oct 22 '22 08:10

Jorg


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.

like image 38
rageandqq Avatar answered Oct 22 '22 09:10

rageandqq


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

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

like image 23
Christian Bonato Avatar answered Oct 22 '22 07:10

Christian Bonato


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

like image 23
georgeawg Avatar answered Oct 22 '22 07:10

georgeawg