AngularJs input text character count directive

This directive will help you to count number of characters in input element its applied on. It will create a paragraph (<p>) element next to element its applied on and will show count in it. You can also customize count message to show.

/** *  How to use : * *  Apply 'char-count' attribute on text input fields/textarea * *  Other properties: *  char-count-msg="countMsg"  : returns a string with count and max-length (Eg: "5 out of 100") *  char-count-auto-show-message="true" : auto display count message near to text inputs * */'use strict';(function () {    let app = angular.module('testApp');    app.directive('charCount', ['$log', '$timeout', function ($log, $timeout) {        return {            restrict: 'A',            scope: {                charCountMsg: "=?",                charCountAutoShowMessage: "@"            },            compile: function compile() {                return {                    post: function postLink(scope, iElement, iAttrs) {                        //angular.element(iElement).parent().append("<p>test</p>");                        function prepareAndAppendMsg() {                            if (iAttrs.maxlength) {                                scope.charCountMsg = iElement.val().length + " out of " + iAttrs.maxlength;                            } else {                                scope.charCountMsg = iElement.val().length;                            }                            if (scope.charCountAutoShowMessage === 'true') {                                scope.pElement[0].innerText = scope.charCountMsg;                            }                        }                        if ((iElement[0].tagName === "TEXTAREA" && iElement[0].type === "textarea") || (iElement[0].tagName === "INPUT" && iElement[0].type === "text")) {                            if (scope.charCountAutoShowMessage === 'true') {                                scope.pElement = angular.element("<p class='char-count-para'></p>");                            }                            iElement.bind('keyup', function () {                                scope.$apply(function () {                                    prepareAndAppendMsg();                                });                            });                            iElement.bind('paste', function () {                                $timeout(function () {                                    scope.$apply(function () {                                        prepareAndAppendMsg();                                    });                                }, 200);                            });                            iElement.bind('focus', function () {                                if (scope.charCountAutoShowMessage === 'true') {                                    // append element and re-calculate size                                    angular.element(iElement).parent().append(scope.pElement);                                    prepareAndAppendMsg();                                }                            });                            iElement.bind('blur', function () {                                if (scope.charCountAutoShowMessage === 'true') {                                    angular.element(iElement).parent()[0].removeChild(angular.element(iElement).parent()[0].lastChild);                                }                            });                        }                        //angular.element(iElement).parent().prepend(angular.element(iElement).parent().lastChild);                        //angular.element(iElement).parent()[0].removeChild(angular.element(iElement).parent()[0].lastChild);                    }                };            }        };    }]);})();

 

Comments

Popular posts from this blog

MATLAB code for Circular Convolution using Matrix method

Positive number pipe in angular 2+