jQuery character counter plugin
JavaScript CSS
Permalink
Failed to load latest commit information.
demo
lib Cleaned out unnecessary code / files (ei: ads) Aug 13, 2013
.gitignore Cleaned up styling for text bubbles Jun 29, 2013
README.md Updated links Jul 16, 2013
gruntfile.js Cleaned up styling for text bubbles Jun 29, 2013
index.html Cleaned out unnecessary code / files (ei: ads) Aug 13, 2013
package.json Added Services link to header Jul 1, 2013
wChar.css Removed borders from bubbles Jun 29, 2013
wChar.jquery.json Removed borders from bubbles Jun 29, 2013
wChar.js
wChar.min.js

README.md

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.

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

License

MIT licensed

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