This script shows a visual counter next to the input field showing the number of characters remaining for the given field.

Basic Usage

The code below...

<form action="#" method="post" id="example1">
	<label for="example1name">Name:</label>
	<input type="text" name="name" id="example1name" maxlength="255">
</form>

<script>
// Finally call the script
$(function(){
	$('#example1 input[maxlength]').CWCharCount();
});
</script>

... produces this

Configuration Options

Property Type Default Description
default_class string 'cw_count' This class is applied to the count field on startup and allows you to set the styles needed for it to blend in with your current site styling.
warning_level int 15 The number of characters remaining before the warning class is added to the count object.
warning_class string 'cw_count_warning' This class is added to the count field once the warning level has been reached. It is removed if the character count increases above the warning level.

Other Examples

Below are some more examples of the script.

Alternative Demo

This demo uses the data-control attribute to control where the countdown is output. I've used Twitter Bootstrap's appended inputs to output the countdown.

Code:

<form action="#" method="post" id="example2">
	<label for="example2name">Name:</label>
	<div class="input-append">
		<input type="text" name="name" id="example2name" data-control="ex2name-control" maxlength="50">
		<span class="add-on" id="ex2name-control"></span>
	</div>

	<label for="example2email">Email</label>
	<div class="input-append">
		<input type="text" name="name" id="example2email" data-control="ex2email-control" maxlength="255">
		<span class="add-on" id="ex2email-control"></span>
	</div>
	<br class="br">
	<button type="submit" class="btn">Submit Form</button>
</form>

<script>
// Finally call the script
$('#example2 input[maxlength]').CWCharCount({
	default_class: 'input',
	warning_level: 3
});
</script>

Example:


Changelog

v0.3.1 17th March 2016 Updated unit tests
Updated links to Github instead of BitBucket
Updated files to latest versions
Added AMD compatibility to the plugin
v0.3 28th February 2014 Use grunt to process files
Added Bower support
v0.2 28th August 2013 Updated to include the data-control option.
v0.1 6th November 2012 Created the first version of the script based on previous created scripts.