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
Post a Comment