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

Asked 29/3, 2013 at 13:58 Answered 27/11, 2019 at 9:46

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.

Machinist answered 29/3, 2013 at 13:58 Comment(1)

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 – Armand 29/3, 2013 at 15:7

I was having the same problem and was able to fix it by following this simple tip provided in this comment: https://mcmap.net/q/267607/-jquery-keydown-on-div-not-working-in-firefox

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

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

Melliemelliferous answered 16/8, 2013 at 15:52 Comment(4)

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. – Queen 6/3, 2014 at 8:48

I think that's because of the way firefox handles html form validation by default? See if this helps: #3809646 – Asiaasian 6/3, 2014 at 13:52

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. – Queen 7/3, 2014 at 9:17

There are not enough upvotes in the world for this. This drove me crazy for like an hour. – Cotangent 15/1, 2016 at 19:53

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)
 })
}

Bing answered 12/6, 2013 at 9:9 Comment(2)

I needed to do $($document).keydown(... to get this to work. I guess jQuery-lite doesn't have the keydown function? – Amoebic 24/7, 2013 at 10:21

@Amoebic Use .on('keydown') for jQuery-lite. – Glogau 25/1, 2014 at 2:0

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;
    };
};

Queen answered 7/3, 2014 at 9:23 Comment(1)

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 – Dolorous 3/8, 2018 at 17: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.

Machinist answered 29/3, 2013 at 18:4 Comment(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);
        }
    }
})

Weaks answered 24/5, 2016 at 7:55 Comment(2)

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. – Stefanstefanac 5/6, 2017 at 6:17

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. – Weaks 9/6, 2017 at 10:32

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);
    }

However answered 27/11, 2019 at 9:46 Comment(0)

Recommended topics

Hot tags