Dodo's Text Counter

• Requires jQuery
• Define the maximum of characters the user may input
• May be applied to one or more input text or textarea fields
• Also disable the user from entering more characters after s/he reaches the maximum
• Last updated on 05/30/2008

Demo

Creating a counter display

chars left

Code: (expand/collapse)

<script type="text/javascript">
jQuery(function($){
	$(".test1").dodosTextCounter(10, {addLineBreak:false});
});
</script>
  

Using a display that already exists

characters remaining

Code: (expand/collapse)

<script type="text/javascript">
jQuery(function($){
	$("textarea.test2").dodosTextCounter(255, {counterDisplayElement: "input",counterDisplayClass: "textareaCounter"});
});
</script>
  

Creating a custom element

chars left

Code: (expand/collapse)

<script type="text/javascript">
jQuery(function($){
	$("textarea.test3").dodosTextCounter(50, {counterDisplayElement: "span",counterDisplayClass: "test3CounterDisplay"});
});
</script>
  

Applying plugin to multiple inputs with the same class

chars left

chars left

chars left

Code: (expand/collapse)

<script type="text/javascript">
jQuery(function($){
	$(".test4").dodosTextCounter(100, {counterDisplayClass: "test4CounterDisplay",addLineBreak:false});
});
</script>
  

Documentation

Basic Usage

Include jQuery and this plugin js in your HTML header

<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.dodosTextCounter-0.1.pack.js"></script>

counterDisplayElement (string)

Tag for the counter display. Default to "span".

counterDisplayClass (string)

CSS class for the counter display. Default to "dodosTextCounterDisplay".

counterDisplayElement & counterDisplayClass

The plugin will use existing element when it could find it in the DOM. Otherwise, the plugin will create the element.

addLineBreak (boolean)

Whether to add <br /> after the input element before the counter display. Default to true.

Download

• jquery.dodosTextCounter-0.1.js
• jquery.dodosTextCounter-0.1.pack.js