Ah yes, that should do nicely. Here, you'll notice that we've already enforced some sort of character limiting by using 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.
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.
The first thing we need to do within this function is to calculate the remaining number of characters the user can type:
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
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.
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:
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: '
With all of that, here's the complete script for you: