posted on:January 18, 2010

jQuery plugin Simplest Twitterlike dynamic character count for textareas and input fields


Every hour that you put into enhancing user experience while developing a site is a hour well spent. There are numerous small improvements that you can perform to make things easier and obvious for the end user. In this article I will present a jQuery plugin built for that purpose.

The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. While typing the Twitter post there is this always present information about how many characters the users have before reaching the limit. The information is not only provided merely by displaying a number, there are different colors applied to certain stages to notify the user about the status.
On your site you might have a comment box or contact form fields limited to certain character count. You can use this simple plugin to provide user with that useful information.

Dynamic character count

Take a look at the demo or
Download plugin

How it works

The first thing that this plugin do is create a sibling element (it adds is immediately AFTER the form element), the "counter", where the remaining character info is stored. On each key up event or text field value change the counting function is triggered and the contents of this "counter" element is changed accordingly. If the remaining character count reaches the "warning" zone (gets close to zero) the CSS class is added. We use this class to change the color of the character count info. If the count reaches zero and goes beyond it another class is added so we can use another style for exceeding the limit.

Just so you can find your way around it, this is the code that the plugin generates by default:

<span class="counter">140</span>

Plugin Options (and default values)

limit: 140

The character limit you wish to set for your text area or input field. It must be a number.

warning: 25

When remaining characters reach the number set with this option the "warning" css class name will be applied to the counter element.

counterElement: ‘span’

The type of element you wish to choose as your "counter" element. By default it is a SPAN element, but you can use paragraphs, divs, strongs, ems…

css: ‘counter’

Class name added to the counter element. Use this class name as a css selector to describe element’s appearance.

cssWarning: ‘warning’

Class name added to the counter element once the character count reaches the "warning" number.

cssExceeded: ‘exceeded’

Class name added to the counter element once the character count reaches zero.

counterText: ”

If you wish to add some text before the remaining character number, you can do so by using this option. It is empty by default.

Here’s what default usage code looks like:

$("#message1").charCount();

…and this is the plugin usage with some customized options:

$("#message2").charCount({
    allowed: 50,		
    warning: 20,
    counterText: 'Characters left: '	
});

Also take a look at the CSS I used for my demos:

form .counter{
	position:absolute;
	right:0;
	top:0;
	font-size:20px;
	font-weight:bold;
	color:#ccc;
	}
form .warning{color:#600;}	
form .exceeded{color:#e00;}

Since I am (always) wrapping the label and form element into a div, I positioned the counter absolutely in relation to the containing div.

You can visit the demo page to see this plugin in action or you can download the plugin package. Let us know your thoughts.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (22 Comments)

  1. bartonm
    January 18, 2010

    Nice & simple. Thanks for the sharing!
  2. B
    January 18, 2010

    its buggy with mouse right click -> Paste.
  3. Mary Lou
    January 18, 2010

    Very nice! We did a similar plugin, but I guess it misses the changing color when the character count becomes negative :-) http://tympanus.net/codrops/2009/11/08/jmaxinput-twitter-like-textarea/
  4. cssglobe
    January 18, 2010

    @B: it should work... what's the bug?
  5. B
    January 18, 2010

    @cssglobe if you want to copypaste a text with right click then the counter is not changing at the first place just if u press a key or leaves the input field. if u do the same on twitter then you can see that that remaining characters are changing immediately when you press paste. hopefully I was understandable. :)
  6. wespai
    January 19, 2010

    nice collect it to ajax.wespai.com
  7. web design miami
    January 19, 2010

    Nice tips, very helpful ! thanks for sharing !
  8. Kristiono Setyadi
    January 20, 2010

    Keep to good work goin' on right there! I like it! Thanks! ;)
  9. ankit@visionaspire.com
    January 20, 2010

    Nice post....this post is really beneficial thanks for sharing
  10. waynep
    January 21, 2010

    @B - to be fair, twitter's also doesn't account for mouse right click -> paste. @cssglobe but there's more instances: 1) select some text and click drag drop on the text input. 2) right click -> cut 3) in OS X (I believe maybe in FF Windows), right click to correct spelling 4 ???) if you use this on a field that the browser will prefill, does it work? If any of these situations seem like corner cases, keep in mind accessibility :) The only way I've found to accurately do a character count on an input is to run a task and poll the input every 500ms.
  11. ASAD
    January 21, 2010

    helpful tips, thanks :)
  12. Bryan Watson
    January 21, 2010

    @waynep This would also solve the the 'long key press bug' that this also doesn't account for. Simply put, hold down a key, it counts the first character, but not the ones after. Then the counter updates upon key release.
  13. web design kent
    January 22, 2010

    Great post many thanks!
  14. SohoInteractive
    January 25, 2010

    Nice little script. I specially liked the warning thingy. Very useful Thank you
  15. Web Design Company
    January 26, 2010

    jQuery offers a mechanism for adding in methods and functionality, bundled as plugins. Most of the methods and functions included in the default download are written using the jQuery plugin construct.The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.
  16. sherwin Shine
    January 27, 2010

    Nice script, little but effective script. thanks very much sharing.
  17. Theo
    January 28, 2010

    Very nice and simple. I was just looking for something like this Thank you for sharing
  18. cssclassic
    January 29, 2010

    Excellent one!!
  19. Ogaaaan
    January 29, 2010

    Hi, I am Ogaaaan from ja_JP. I hope adding property "minimum". if user value was not reached 5 characters, i want to display browser "Please enter at least 5 characters". best regards.
  20. New York Web Design
    January 29, 2010

    Thanks for spending time to create this awesome post.. You made my day...!!
  21. Karthik
    February 1, 2010

    Very simple and nice...thankx....
  22. VV
    February 17, 2010

    very nice!!!

Sorry, the comment form is closed at this time.