javascript - angular.js listen for keypress as shortcut for button - Stack Overflow

admin管理员组

文章数量:1200988

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

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

• javascript
• jquery
• angularjs
• angularjs-directive
• keypress

Share Improve this question Follow edited May 23, 2017 at 12:26 CommunityBot 111 silver badge asked Jul 8, 2014 at 0:06 bitfidgetbitfidget 35722 gold badges33 silver badges1212 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 13

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

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.

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

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

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

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

本文标签： javascriptangularjs listen for keypress as shortcut for buttonStack Overflow