jquery-character-counter

A simple, Twitter style character counter for HTML input fields. Based on your specified limit, the plugin simply adds a span ( by default ) after your HTML input and updates it as you type.

Features:

Ctrl & V paste support
Right click & paste support
Customizable wrapper and css classes
Customizable counter format
Callbacks for exceeding and deceeding the specified limit

Getting Started

To get started with the character counter, simply reference jQuery and the jQuery Character Counter plugin in your page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>	
<script type="text/javascript" src="jquery.charactercounter.js"></script>

Examples

Default Usage

HTML:

<form>
  <textarea id="count_me"></textarea>
</form>

Javascript:

$("#count_me").characterCounter();

Custom Limit

HTML:

<form>
  <textarea id="count_me"></textarea>
</form>

Javascript:

$("#count_me").characterCounter({
  limit: '250'  
});

Options

The following options are currently available:

{
limit: 150,
counterWrapper: 'span',
counterCssClass: 'counter',
counterFormat: '%1',
counterExceededCssClass: 'exceeded',
onExceed: function(count){},
onDeceed: function(count){},
customFields: {}
}

limit - the number of characters you wish to limit.
counterWrapper - the element you wish to wrap your counter in.
counterCssClass - the CSS class to apply to your counter.
counterFormat - the format of your counter text where '%1' will be replaced with the remaining character count.
newLineSymbolCount - count new lines
counterExceededCssClass - the CSS class to apply when your limit has been exceeded.
onExceed - this function is called when the limit is breached
onDeceed - this function is called when the limit, having previously been exceeded, is now deceeded customFields - key value pairs of custom options to be added to the counter such as class, data attributes etc.

darrentaytay / jquery-character-counter