Textarea character count jQuery

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.

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

2. Provide an id for TextArea

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