projects

openExchangeRateCFC
instagramCFC
foursquareCFC
pastebinCFC
dribbbleCFC
textCounter
tumblrCFC
shrinkURL
Shrinkadoo
picasaCFC
Filler Text
52 Week Bible Planner
jQuery table filter
deep thoughts

you should

visit andyMatthews.net
follow me on Twitter

textCounter - a jQuery plugin

Download production version .793kb - Download development version 1,017kb

Fork me on Github

TextCounter is a jQuery plugin which provides a countdown of text in an input field. Inspired by the way Twitter counts down the remaining characters in a tweet, textCounter is a configurable jQuery plugin that easily allows anyone to add this same functionality. Written with best practices in mind, textCounter offers multiple character count ranges, custom coloration via CSS classes, and even the ability to prevent users from exceeding the character count limit. Let's see it in action.


As soon as the page loads, textCounter initializes the container you wish to hold the count. It then references the target input field's length and compares it to your custom alert and warning levels. Setup is easy. At it's most basic, simply include jquery, the textCounter plugin, and tie it to your form elements.


<script src="jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="jquery.textCounter.js" type="text/javascript"></script>
<script>
	$(function(){
		$('#theCounter').textCounter({
			target: '#myTextarea' // required: string
		});
	});
</script>
		

The full configuration, with styles to make the counter text change at the correct values.


<style>
	.tcAlert { color: orange; }
	.tcWarn { color: red; }
</style>
<script src="jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="jquery.textCounter.js" type="text/javascript"></script>
<script>
	$(function(){
		$('#theCounter').textCounter({
			target: '#myTextarea', // required: string
			count: 70, // optional: integer [defaults 140]
			alertAt: 20, // optional: integer [defaults 20]
			warnAt: 10, // optional: integer [defaults 0]
			stopAtLimit: false // optional: defaults to false
		});
	});
</script>