Last Updated: September 27, 2021
·
17.48K
· 0xax

Blur directive in AngularJS

There is no native support for blur event in AngularJS. With this directive you can handle blur event in your AngularJS controllers:

Module.directive('ng-blur', function() {
        return {
            restrict: 'A',
            link: function postLink(scope, element, attrs) {
                element.bind('blur', function () {
                    scope.$apply(attrs.ngBlur);
                });
            }
        };
    });

And use it in html template:

<input type="text" ng-blur="handleInputBlur()"></input>

And handle it in controller:

$scope.handleInputBlur = function(){
   // do some action here
}

@0xAX

5 Responses
Add your response

The directive's name should be ngBlur instead of ng-blur in angular 1.1.3

over 1 year ago ·

don't use "ng" as a prefix.. let the angular.js guys to do it, and use your own prefix :)

over 1 year ago ·

Thank you! This worked perfectly.

over 1 year ago ·

Thank you, this has been very helpful.

over 1 year ago ·

@allain, @martinhaluza glad to help :)

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside