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.
Nice script! Exactly what I was looking for. I also like that you posted it without using JQuery as well.
Thanks a lot very helpful.
cheerz
hey Man Ossam speically Without Jquery Hats Off dude!!!!
Nice tutorial Anis uddin .I have implemented a similar thing using Jquery .It includes a progress bar which increases when a user type in the textarea .
http://youhack.me/2010/04/22/live-character-count-with-progress-bar-using-jquery/
Enjoy !
excellent article. Thanks for sharing
Anis, how does your script compare to the one at http://www.mediacollege.com/internet/javascript/form/limit-characters.html ?
To be honest, I know very little about JavaScript and it’s hard to decide which one is better.
At any rate, I’m already using PHP to prevent users from entering more than the allotted number of characters into my form’s textarea. I have also included a “title” attribute for the textarea’s parent div with the value of “250 characters max”. (Of course, users will not see that tooltip if they use the keyboard to tab through the form’s fields instead of navigating with the mouse.) But the main reason for using a JavaScript function like yours and the other one I referred to would be to give users feedback on when they are approaching the character limit.