Textarea character count jQuery

Home >> Blog >> Textarea character count jQuery
By Admin Sep 04, 2020

Textarea character count jQuery: characters remaining textarea validation jquery

How to use : Textarea character count jQuery implementation is very easy which include 3 steps.

  1. Download plugin file from GitHub OR use following code which is same.
  2. Provide an id for text input "Textarea" on which you want to apply this validation.
  3. Call jqEasyCounter plugin.
Step 1. Download plugin code from GitHub OR use following code
/* jQuery jqEasyCharCounter-Extended plugin * Requires: jQuery v1.3+ */ (function($) { $.fn.extend({ jqEasyCounter: function(givenOptions) { return this.each(function() { var $this = $(this), options = $.extend({ maxChars: 100, // max number of characters maxCharsWarning: 80, // max number of characters before warning is shown msgFontSize: '12px', // css font size for counter msgFontColor: '#000', // css font color for counter msgFontFamily: 'Arial', // css font family for counter msgTextAlign: 'right', // css text-align for counter (left, right, center) msgWarningColor: '#F00', // css font color for warning msgAppendMethod: 'insertAfter', // position of counter relative to the input element(insertAfter, insertBefore) msg: 'Characters: ', // The message to use msgPlacement: 'prepend', // Prepend/Append the message to the number numFormat: 'CURRENT/MAX' // Format of the numbers (CURRENT, MAX, REMAINING) }, givenOptions); if(options.maxChars <= 0) return; // create counter element var jqEasyCounterMsg = $("
 
"); var jqEasyCounterMsgStyle = { 'font-size' : options.msgFontSize, 'font-family' : options.msgFontFamily, 'color' : options.msgFontColor, 'text-align' : options.msgTextAlign, 'width' : $this.width(), 'opacity' : 0 }; jqEasyCounterMsg.css(jqEasyCounterMsgStyle); // append counter element to DOM jqEasyCounterMsg[options.msgAppendMethod]($this); // bind events to this element $this .bind('keydown keyup keypress', doCount) .bind('focus paste', function(){setTimeout(doCount, 10);}) .bind('blur', function(){jqEasyCounterMsg.stop().fadeTo( 'fast', 0);return false;}); function doCount(){ var val = $this.val(), length = val.length if(length >= options.maxChars) { val = val.substring(0, options.maxChars); }; if(length > options.maxChars){ // keep scroll bar position var originalScrollTopPosition = $this.scrollTop(); $this.val(val.substring(0, options.maxChars)); $this.scrollTop(originalScrollTopPosition); }; if(length >= options.maxCharsWarning){ jqEasyCounterMsg.css({"color" : options.msgWarningColor}); }else { jqEasyCounterMsg.css({"color" : options.msgFontColor}); }; if(options.msgPlacement == 'prepend') { html = options.msg + options.numFormat; } else { html = options.numFormat + options.msg; } html = html.replace('CURRENT', $this.val().length); html = html.replace('MAX', options.maxChars); html = html.replace('REMAINING', options.maxChars - $this.val().length); jqEasyCounterMsg.html(html); jqEasyCounterMsg.stop().fadeTo( 'fast', 1); }; }); } }); })(jQuery);
minified version of above code is available on GitHub
Step 2. Provide an id for TextArea
Step 3. Call jqEasyCounter Plugin
$('#message').jqEasyCounter({ maxChars: 100, // max number of characters maxCharsWarning: 80, // max number of characters before warning is shown msgFontSize: '12px', // css font size for counter msgFontColor: '#000', // css font color for counter msgFontFamily: 'Arial', // css font family for counter msgTextAlign: 'right', // css text-align for counter (left, right, center) msgWarningColor: '#F00', // css font color for warning msgAppendMethod: 'insertAfter', // position of counter relative to the input element(insertAfter, insertBefore) msg: 'Characters: ', // The message to use msgPlacement: 'prepend', // Prepend/Append the message to the number numFormat: 'CURRENT/MAX' // Format of the numbers (CURRENT, MAX, REMAINING) });