For a textbox, character of a field can easily be limited with maxlength attribute. But maxlength doesn’t work for  a textarea. So, It needs an alternate way. For one of my project, I wrote a function for this purpose where I used jQuery. Here I am explaining how I did it.

Let’s look an example of this interactive solution here. 

OK. Now we will make this in 2 easy steps.

1. Import your jQuery file and write the function "limitChars(textid, limit, infodiv)" in the head section of your page.

This function takes 3 parameters. They are:

  • textid : (string) The ID of your textarea.
  • limit : (num) The number of character you allow to write.
  • infodiv : (string) The ID of a div, in which limit information will be shown .

  Here is the function:

 1: <script language="javascript" src="Jquery.js"></script>
 2: <script language="javascript">
 3: function limitChars(textid, limit, infodiv)
 4: {
 5: var text = $('#'+textid).val(); 
 6: var textlength = text.length;
 7: if(textlength > limit)
 8: {
 9: $('#' + infodiv).html('You cannot write more then '+limit+' characters!');
 10: $('#'+textid).val(text.substr(0,limit));
 11: return false;
 12: }
 13: else
 14: {
 15: $('#' + infodiv).html('You have '+ (limit - textlength) +' characters left.');
 16: return true;
 17: }
 18: }
 19: </script>

Remember, the script is using jQuery. So be careful about the path of jquery at first line of this script.
 
2. Bind the function to the keyup event of your textarea. Do this in jQuery’s ready event of document. Just like this:
 1: $(function(){
 2: $('#comment').keyup(function(){
 3: limitChars('comment', 20, 'charlimitinfo');
 4: })
 5: });

Here my textarea’s id is ‘comment’ , limit of characters is 20 and limit information will shown in a div whose id is ‘charlimitinfo’. That’s all, we have made an "Interactive character limiter" for our textarea using Jquery.
 
If you are not using jQuery for your site, it will not be wise to include it only for this script. You can get the same functionality from javascript without jquery. Look at this example. It looks like and works 100% as the previous though not using jquery.
Here you need just 2 changes. First, change the function "limitChars" as follows :
 1: function limitChars(textarea, limit, infodiv)
 2: {
 3: var text = textarea.value; 
 4: var textlength = text.length;
 5: var info = document.getElementById(infodiv);
 6:  
 7: if(textlength > limit)
 8: {
 9: info.innerHTML = 'You cannot write more then '+limit+' characters!';
 10: textarea.value = text.substr(0,limit);
 11: return false;
 12: }
 13: else
 14: {
 15: info.innerHTML = 'You have '+ (limit - textlength) +' characters left.';
 16: return true;
 17: }
 18: }

 
And finally, call the function manually on keyup event of your textarea. Use "this" keyword for textarea instead of id when calling the function. example:
 1: <textarea name="comment" id="comment" onkeyup="limitChars(this, 20, 'charlimitinfo')">
 2: </textarea>

Finished. We made the solution again without dependency of any javascript framework.

Please let me know if you have an idea to make it better. 

Share and Enjoy:
  • Digg
  • del.icio.us
  • Netvouz
  • description
  • Wists
  • Furl
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Simpy
  • StumbleUpon
  • Technorati