Digg Style Update Characters While Typing
Hey guys, It's been a while since my last post. I've been awfully busy with stuff, and such... so yea, I've some some nice content to share! Here, I want to discuss how to make a part of text that will update a number according to how many characters you type into the textfield, and once you reach the limit you will not be able to type anymore. I got this idea from Digg.com, where their news submission page has this implemented. I'm just going to go over a basic one here, and you can probably figure out the rest. Don't know what I'm talking about!? then check out the demo here. If you're ready, let's continue!
So, let's start out with the HTML code. Below I have posted the simple HTML code you'll need: it's really just a textarea, no form needed for this simple script:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta equiv="Content-Type" content="text/html; charset=utf-8">
<title>Update Counter While Typing</title>
</head>
<body>
<strong id="countArea">350</strong> Characters Left<br /><br />
<label for="text">Enter Some Text:</label>
<br /><br />
<textarea id="text" name="text" cols="50" rows="8" wrap="soft" onkeyup="updateCounter(this, 350, 'text', 'countArea');" onpaste="updateCounter(this, 350, 'text', 'countArea');">
</textarea>
</body>
</html>
This is, again, just a simple textarea. I have not put any text in it to begin with, just so we can keep the counter nice and simple. However, you probably noticed how I have added some functions to the textarea depending on some actions you do (whenever you release a key or paste something). Now, here we will examine some JavaScript.
<script type="text/javascript" language="javascript">
<--
window.onload = init; function init() { document.getElementById('countArea').innerHTML = 350-document.getElementById('text').value.length;
}
function updateCounter(field,maxlength,id,counter) {
var totalLength = field.value.length;
if(totalLength >= maxlength) {
field.value = field.value.substring(0, maxlength);
}
document.getElementById(counter).innerHTML = maxlength-field.value.length;
}
-->
</script>
Well surprisingly, that isn't too much code to take in. For me, anyways. Now let's explain it, shall we?
The first thing that I have done is whenever the window is loaded, a function with the name init is called. This will check a division on the page with the ID "countArea", which is where you're variable number will be held. The function will set it to 350(which can be changed, I just used 350 in this case. The number in that place is actually the max amount of characters you want in the textarea), and then subtract the value of the textarea so far. It will probably be 0, but if the user clicks the back button after they had already entered text into the textarea, then it will update the number right when the page loads.
The next function is updateCounter(), and this one is a doozy. It takes 4 parameters: field(which is usually just set to "this"),maxlength(the max number of characters allowed in the field),id(the id of the textarea), and counter(the ID of the span or div that is around where your number is).
First off, I check to see how many characters are in the textarea already. I set this number to a variable of totalLength. Then we have an if statement, which basically says "if the user has typed in more characters than the maximum number of characters allowed, execute this". What that does is it deletes everything that the user types after the limit, which is handy for getting your point across to the user that they have typed too much. Then, the final part to this function is getting the counter div, span, or whatever the number is enclosed in and updating it. Pretty simple code, eh?
And that's pretty much it! Hopefully it was informative to you guys, and I hope I can have some more tutorials in the future. If you have any questions just post a comment here, and I'll try to get back to you.
