AngularJS ng-keydown directive only working for <input> context?

Question

I am pretty new to AngularJS but found it quite to my liking so far. For my current project I need hotkey functionality and was happy to see that it is supported since the 1.1.2 release.

The ng-keydown directive (http://code.angularjs.org/1.1.3/docs/api/ng.directive:ngKeydown) works as expected for input types but fails me for any other context like div etc. which seems odd given that the documentation says otherwise.

Here is an minimal example (http://jsfiddle.net/TdXWW/12/) of the working respectively the not working:

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

NOTE: I know this could be handled with plain jQuery (http://www.mkyong.com/jquery/how-to-check-if-an-enter-key-is-pressed-with-jquery/) but I much prefer to understand how to deal with it in AngularJS.

div that isn't contenteditable doesn't trigger focus when clciked so there is no active element to bind keypress to. Try same thing using jQuery or native script have same problem. Could bind event to document and test that target is not an input. Not sure what your use case is — charlietfl
– charlietfl, Commented Mar 29, 2013 at 15:07

Community · Accepted Answer · 2017-05-23 12:02:29Z

86

I was having the same problem and was able to fix it by following this simple tip provided in this comment: https://stackoverflow.com/a/1718035/80264

You need to give the div a tabindex so it can receive focus.

<div id="testdiv" tabindex="0"></div>

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Aug 16, 2013 at 15:52

João Josézinho

2,7284 gold badges23 silver badges27 bronze badges

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

4 Comments

Gurnard Over a year ago

nice very good bit of information. The only issue is then when it gets focus, in FireFox at least, I get a big red border around the element.

João Josézinho Over a year ago

I think that's because of the way firefox handles html form validation by default? See if this helps: stackoverflow.com/questions/3809146/…

Gurnard Over a year ago

Thanks for the link. In the end I added ng-keydown and ng-keyup to the body element that then called functions in the body controller. These then set a variable but could also broadcast to other controllers. Works very well for my needs (selecting data with shift). Thanks for the response.

TheSoundDefense Over a year ago

There are not enough upvotes in the world for this. This drove me crazy for like an hour.

Finn Johnsen · Accepted Answer · 2013-06-12 09:09:25Z

9

Thanks! To wrap this up I got this working by, injecting $document into my directive, then:

MyApp.directive('myDirective', function($document) {
return {
...
 $document.keydown(function(e){
   console.log(e)
 })
}

answered Jun 12, 2013 at 9:09

Finn Johnsen

6355 silver badges8 bronze badges

2 Comments

Crashthatch Over a year ago

I needed to do $($document).keydown(... to get this to work. I guess jQuery-lite doesn't have the keydown function?

Matt Way Over a year ago

@Crashthatch Use .on('keydown') for jQuery-lite.

Gurnard · Accepted Answer · 2018-12-04 06:41:07Z

8

This was the way I got it working in the end.

Add ng-app to the html element and ng-keyup and ng-keydown to the body element:

<html ng-app="myApp" ng-controller="MainCtrl">
.....
<body ng-keydown="keyPress($event);" ng-keyup="keyRelease($event);">

Then the funcitons in my controller deal with the event calling event.which to get the key code (in my implementation I set a var to the rootScope but you could also broadcast to other controllers)

$scope.keyPress = function(eve) {
    if (eve.which === 16) { // shift
        // $rootScope.$broadcast('doShift');
        $rootScope.shiftOn = true;
    };
};

edited Dec 4, 2018 at 6:41

user8280225

answered Mar 7, 2014 at 9:23

Gurnard

1,78524 silver badges45 bronze badges

1 Comment

dǝɥɔS ʇoıןןƎ Over a year ago

This doesn't work so amazing, if you are using multiple sub-templates and only one body. I like having a custom directive a lot more

Community · Accepted Answer · 2017-05-23 12:09:52Z

1

The comment by charlietfl cleared things up and binding the event to $(document) worked as expected! Take away message: The AngularJS documentation is not really exhaustive, i.e. demands background knowledge.

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Mar 29, 2013 at 18:04

Lukas N.P. Egger

9632 gold badges9 silver badges12 bronze badges

Comments

vvn050 · Accepted Answer · 2017-06-09 10:31:07Z

0

angular.module('app').directive('executeOnEnter', function () {
    return {
        restrict: 'A',
        link: function (scope, el, attrs, $rootScope) {                      
            $('body').on('keypress', function (evt) {
                if (evt.keyCode === 13) {
                    el.trigger('click', function () {
                    });
                }            
            })

        },
        controller: function ($rootScope) {
            function removeEvent() {
                $("body").unbind("keypress");
            }
            $rootScope.$on('$stateChangeStart', removeEvent);
        }
    }
})

edited Jun 9, 2017 at 10:31

answered May 24, 2016 at 7:55

vvn050

2323 silver badges5 bronze badges

2 Comments

Gitesh Purbia Over a year ago

you are binding keypress on body. So binding continues word event your view has change or when u dont needed that binding to other views.

vvn050 Over a year ago

if you are concerned with that, i edited the answer. Of course this might remove something u attached previously to the body (on keypress), so you might want to take care about that.

Andrey · Accepted Answer · 2019-11-27 09:46:28Z

0

it worker fine for me, just add tabindex attribute. make sure that ng-keydown contains correct angularjs expression

    <div ng-keydown="keypress($event)" tabindex="0">

    $scope.keypress = function(ev) {
        console.log('keyprez', ev);
    }

answered Nov 27, 2019 at 9:46

Andrey

2,23822 silver badges23 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-keydown directive only working for <input> context?

6 Answers 6

4 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related