Text Area Character Counter

Blog

10 Apr


You've probably noticed that the comment fields below now have character limit counters attached to them. These counters have been written using Javascript, and the one thing I noticed whilst writing the counters was the lack of explanation anywhere as to how to write one.

Now, this could be my shoddy Google skills at play here, but I thought - just in case - that I'd better write up a quick way of how to code a basic counter. (Best part is, you don't need great, or any, Javascript knowledge to do this).

Firstly, this is being coded in Javascript, HTML, and some CSS. Instead of me just rambling on for hours upon hours, how about we cut to it, eh?

Before we do any Javascript work whatsoever, we first need that text area!

<form method="post" action="#"> <textarea id="comment" name="comment" maxlength="500"></textarea> </form>

Ah yes, that should do nicely. Here, you'll notice that we've already enforced some sort of character limiting by using the maxlength attribute of the textarea tag. Now, the maximum number of characters anyone can type into this field is 500; so we'll stick to 500 as our limit as it's a nice round number.

And now, we come onto the main course! It's time to start writing that Javascript function. The script for this should be placed between the <head></head> tags of your site. Seeing as this is Javascript as well, we'll also need the <script></script> tags.

<head> <script type="text/javascript"> </script> </head>

"type=text/javascript" should be some what self-explanatory, but it's telling the site the script it's about to read is written in Javascript. With these two tags out of the way we now need to think; what do we want to call our function?

Well, we need something self-explanatory, so why not fieldCounter, eh? Sounds good enough to me! In order to make this function work, we need a further 4 things. Namely: the field we want to apply the counter to, the upper-limit of said field, the warning limit for the field, and finally the id of the counter associated to the field.
The warning limit will be used to change the color of the counter from white to red, stating to the user that they're approaching the limit.

<script type="text/javascript"> //limit and update a field's counter function fieldCounter(field, limit, warning_limit, counter_id) { } </script>

The first thing we need to do within this function is to calculate the remaining number of characters the user can type:

<script type="text/javascript"> //limit and update a field's counter function fieldCounter(field, limit, warning_limit, counter_id) { //number of characters remaining var remaining_chars = limit - field.value.length; //update the counter document.getElementById(counter_id).innerHTML = (" " + remaining_chars + " remaining"); } </script>

This is now where things have become interesting. The first line of code is a variable called remaining_chars that will store the number of characters the user has left to type. (field.value gets the textarea's current text, and .length gets the number of characters within that text).

The more interesting part is the second line. document refers to the current page of your site that you're working with. Therefore, document.getElementById(counter_id) is simply obtaining the HTML tags that is the counter - something we'll write later. The final part .innerHTML = "" places between the comment-tags the text we want to display, such as: "12 remaining" or something.

If the comment-tags were <span> tags, then after the code above they would turn into: <span> 12 remaining</span>

The final parts of this function is the final limit enforcement and CSS. The limit enforcement is basically checking to see if the remaining number of characters is less than 0, if it is then we substring the text within the field. So if the limit was 5, and the textarea text was "123456", then this check would change it to "12345". Although the maxlength attribute should mean this never happens, it's still worth having. Also, with this, you could actually remove the maxlength atrribute in the textarea.

And then, of course, we get the CSS. All we do here is check to see if the remaining number of characters is less than the warning limit. If it is, then change the text to red, else back to white.

<script type="text/javascript"> //limit and update a field's counter function fieldCounter(field, limit, warning_limit, counter_id) { //number of characters remaining var remaining_chars = limit - field.value.length; //update the counter document.getElementById(counter_id).innerHTML = (" " + remaining_chars + " remaining"); //enforcement further limiting if (remaining_chars < 0) { var $subText = field.value.substring(0, limit); field.value = $subText; } //if remaining is less than warning, display as red if (remaining_chars <= warning_limit) { document.getElementById(counter_id).style.color = "red"; } else { document.getElementById(counter_id).style.color = "white"; } } </script>

That's it for the function! All that's left is to fiddle around with the textarea and its counter. The main part is on the textarea. Basically, we need to call the above function, and we only want that to happen on a keyup event. Therefore, we can finalise the textarea to:

<form method="post" action="#"> <textarea id="comment" name="comment" maxlength="500" onkeyup="fieldCounter(this, 500, 25, 'comment_counter')"></textarea> <label id='comment_counter'> 500</label> </form>

Here, we tell the textarea to call the function when it receives an onkeyup event. Also, we have now created our counter, initialising its value to 500. You'll also see that when we call the fieldCounter function in the textarea, that we pass through the id of the comment span-tags; namely: 'comment_counter'.

With all of that, here's the complete script for you:

<head> <script type="text/javascript"> <!-- //limit and update a field's counter function fieldCounter(field, limit, warning_limit, counter_id) { //number of characters remaining var remaining_chars = limit - field.value.length; //update the counter document.getElementById(counter_id).innerHTML = (" " + remaining_chars + " remaining"); //enforcement further limiting if (remaining_chars < 0) { var $subText = field.value.substring(0, limit); field.value = $subText; } //if remaining is less than warning, display as red if (remaining_chars <= warning_limit) { document.getElementById(counter_id).style.color = "red"; } else { document.getElementById(counter_id).style.color = "white"; } } //--> </script> </head> <!-- main body --> <body> <form method="post" action="#"> <textarea id="comment" name="comment" maxlength="500" onkeyup="fieldCounter(this, 500, 25, 'comment_counter')"></textarea> <label id='comment_counter'> 500</label> </form> </body>



Share this:

Comments


  Allowed tags: <a> <b> <strong> <i> <em> <del> [code] [com]