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.
- Download plugin file from GitHub OR use following code which is same.
- Provide an id for text input "Textarea" on which you want to apply this validation.
- 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)
});