Skip to content
jQuery character counter plugin
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A jQuery plugin for textarea, text and password inputs to add a character counter bubble that fades in while you type and fades out when you stop typing.

Related Plugins

  • wForm - See all the form plugins working together.
  • wSelect - Custom select boxes.
  • wInput - Input plugin that handles backwards compatability for placeholders.
  • wCheck - Radio and checkbox input plugin.


Available options with notes, the values here are the defaults.

$.fn.wChar.defaults = {
    theme: 'classic',         // set theme
    position: 'tr',           // position of character bubble (tl,tc,tr,rt,rm,rb,br,bc,bl,lb,lm,lt)
    opacity: 0.9,             // set opacity of counter bubble
    showMinCount: true,       // display count down for min characters
    min: 0,                   // min default
    max: 100,                 // max default
    fadeIn: 500,              // bubble fade in speed
    fadeOut: 500,             // bubble fade out speed
    delayIn: 0,               // delay after start typing before bubble fades in
    delayOut: 2000            // delay after stop typing before bubble fades out
    message: '',              // if set will display a message along side max number of characters
    messageMin: ''            // if set will display a message along side min number of characters


Include the following files:

<script type="text/javascript" src="./wChar.js"></script>
<link rel="Stylesheet" type="text/css" href="./wChar.css" />

You can then apply the plugin to any input text, password and textarea elements using the jQuery selector function:

$('input:text, input:password, textarea').wChar();


Set the minlength and maxlength using data attributes data-minlength and data-maxlength. Note that the minlength is optional and not required. Also if you do not set a maxlength a default from the options will be used.

<input type="text" data-minlength="10" data-maxlength="100"/>


You can also optionally set a message a min and max message that will appear next to the character count while typing. Where message is the number of characters remaining and messageMin is the minimum number of characters required.

$('input:text, input:password, textarea').wChar({
    message: 'left',
    messageMin: 'to go'


If you want to use Grunt you will need to install the required plugins locally using npm install in the root folder of your project. If you need to setup Grunt on your system you can follow my Setting up Grunt.js guide.



MIT licensed

Copyright (C) 2011-2013 Websanova

You can’t perform that action at this time.