jQuery Character Counter and Limit Plugin - wChar

wChar is a jQuery plugin that displays a character counter when typing in a input field or a textarea as well as limiting the max/min length of typed user input.

Related plugins:

• Simple Live Character Counter with Javascript - Countable
• Simple Char Counter For Inputs and Textareas
• Char Counter and Limiter Plugin - Charlimiter
• Twitter-Like Text Area Character Counter
• jQuery Character Counter and Limit Plugin For Bootstrap

How to use it :

1. Include the latest jQuery library and wChar.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="wChar.js"></script>

2. Include wChar CSS to style your plugin

<link rel="Stylesheet" type="text/css" href="./wChar.css" />

3. Markup. Use date- attribute to set the max/min length of characters user input

<textarea id="wChar1" data-wChar-min="10" data-wChar-max="100"></textarea>

4. Call the plugin with options

<script type="text/javascript">
	$("#wChar1").wChar();
</script>

5. More Options

$('input, textarea').wChar({
    position      : 'tr',       // position of the counter (tl,tc,tr,rt,rm,rb,bl,bc,br,lt,lm,lb)
    color         : 'black',    // color of counter
    colorMin      : 'red',      // color of counter when showing min required
    message       : 'left',     // message to show with characters left
    messageMin    : 'to go',    // message to show for min characters required
    opacity       : 0.6,        // opacity level
    min           : 0,          // minimum amount of characters
    max           : 100,        // maximum amount of characters
    fadeIn        : 500,        // time before counter appears in milliseconds
    fadeOut       : 500,        // time before counter fades in milliseconds
    delayIn       : 0,          // time before counter displays in milliseconds
    delayOut      : 1500,       // time before counter begins to dissapear in milliseconds
    width         : 50,         // define a set width for the counter
    height        : 0,          // define a set height for the counter (0 is auto)
    offsetX       : 1,          // x offset of counter (negative if left of element)
    offsetY       : 2,          // y offset of counter (negative if above element)
    showMinCount  : true        // show negative count for minimum required amonut
});

Change Log:

v2.1.3 (2013-06-29)

• Cleaned up styling for text bubbles

v2.1.0 (2013-06-11)

• Restored 'message' and 'messageMin' options.

---

This awesome jQuery plugin is developed by websanova. For more Advanced Usages, please check the demo page or visit the official website.