2/12/2010

jQuery maximum limit text/textarea with Word/Character downwards counter

This is a useful jQuery utility that shows the number of characters left in a input field(text/textarea).
This allows you to have a maximum limit on your text area and restricts the user if reached the max limit. (Try the demo)

1. TextCounterExample.html page

This is a simple HTML page which has a textarea input field and a span which keeps showing the number of characters left as you are typing.
Download code here or copy this code and save this in a file as TextCounterExample.html extension.
<html>
 <header>
 <script src="jquery.js" type="text/javascript"></script>
 <script src="textcounter.js" type="text/javascript"></script>
 </header>
 <body>
 <textarea class="word_count" rows="5" cols="40"></textarea>
 <br/>
 <span class="counter"></span>
 </body>
 </html>

2. Javascript textcounter.js

I always prefer to keep JavaScript separate from html code, therefore I have created a textcounter.js file. This JavaScript uses jQuery for doing the magic.
Download code here or copy this code and save the file as textcounter.js in the same directory where you have html file.

$(document).ready(function(){
 /**
  * Character Counter for inputs and text areas showing characters left.
  */
 $('.word_count').each(function(){
     //maximum limit of characters allowed.
     var maxlimit = 240;
     // get current number of characters
     var length = $(this).val().length;
     if(length >= maxlimit) {
   $(this).val($(this).val().substring(0, maxlimit));
   length = maxlimit;
  }
     // update count on page load
     $(this).parent().find('.counter').html( (maxlimit - length) + ' characters left');
     // bind on key up event
     $(this).keyup(function(){
  // get new length of characters
  var new_length = $(this).val().length;
  if(new_length >= maxlimit) {
    $(this).val($(this).val().substring(0, maxlimit));
    //update the new length
    new_length = maxlimit;
   }
  // update count
  $(this).parent().find('.counter').html( (maxlimit - new_length) + ' characters left');
     });
 });

});

3. Need jQuery for this to work
Download the jQuery file used in this example from Download.
Or download latest version of jQuery from http://jquery.com and save it as jquery.js file in same directory where you have html file.
Now open the TextCounterExample.html page in a browser and the counter should be updating as you type.


4. Try the live demo of same code below.
Type in some character in the text area and see the character counter being updated as you type. The maximum allowed characters are 240 in this demo, and can be easily configured.



5. Updating the maximum limit
The demo version max limit value is set to 240 characters you can change this limit easily.
For updating the maximum limit you can edit the line:7 in textcounter.js file.

//maximum limit of characters allowed.
var maxlimit = 240;

This code is enhanced version of word_counter I found(from google search) on this link jQuery word character counter

3 comments:

  1. Yes.It's working.My problem is solved by simply coping endorsed dir in apache tomcat home dir.Thanks.

    ReplyDelete
  2. this is a character counter not a word counter.

    ReplyDelete

Got something to say? Don't hold it! Tell it to us.

You Might Like

.....