wChar.js

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.

• View the wChar demo
• Download the lastest version of wChar

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.

Settings

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

Examples

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

length

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"/>

message

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

Grunt.js

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.

Resources

• More jQuery plugins by Websanova
• Websanova JavaScript Extensions Project
• jQuery Plugin Development Boilerplate
• The Ultimate Guide to Writing jQuery Plugins

License

MIT licensed

Copyright (C) 2011-2013 Websanova http://www.websanova.com