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

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,
counter: { 
  wrapper: 'span', 
	css_class: 'counter',
	format: '%1'
},
exceeded: { 
	css_class: 'exceeded'
}