Design a Digg-Like Character Counter / JRB

Design a Digg-Like Character Counter

Digg Icon Along with Digg’s sleek color scheme and AJAX-based development, there are many fancy features on the site that fascinate me. So for today’s demo, I have decided to create a character counter that counts how many characters you have entered into a field a limits the amount you can have. This is seen on Digg’s submit page, which limits the amount of characters you can enter for a title and a description. It is a really neat effect that can be useful for many different reasons, such as limiting how long a username can be, or making sure a set number of characters are entered for information (like a phone number).

If you are interested in checking out the demo, you can view it by clicking below:

If you are interested in developing something like this, be sure to read on. I’ll provide you all the information you need to get something like this up and running, so you can use an awesome effect like this on your own site!

Starting Off With HTML

As always, let’s begin with our basic HTML structure. Note that for the most part this is a blank page, except for the textarea and the small “update section”, which will be explained shortly.

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Update Counter While Typing</title>
</head>
 
<body>
    <h2><label for="text">Enter Some Text:</label></h2>
 
    <div id="txtarea" class="clearfix">
    <textarea id="text" name="text" cols="50" rows="8" wrap="soft" onkeyup="updateCounter(this, 350, 'text', 'countArea');" onpaste="updateCounter(this, 350, 'text', 'countArea');"></textarea>
 
    <h5><strong id="countArea">350</strong> Characters Left</h5>
    <p id="warning"></p>
    </div>
</body>
</html>

So as you can see, we have a textarea which calls a function called updateCounter every time a key is lifted up or something is pasted in. This is what we will use to update the page counter to show how many characters we have left, along with checking if we have exceeded our limit. Below the textarea you’ll see we have something called the countArea. This is the text that will be updated whenever something is typed. As you can guess, I am setting my limit to 350, but you can set it to anything you want.

The JavaScript Code

Since the HTML is pretty boring, let’s get to the real reason we’re here. There is a semi-large amount of code to take in, but I feel that it’s all pretty easy to understand once you get the hang of it.

window.onload = init;
var maxedOutText = "You've maxed out your character count!"; // What text to input whenever you have no more characters to type
 
function init() {
	document.getElementById('countArea').innerHTML = 350-document.getElementById('text').value.length;
	if(document.getElementById('text').value.length >= 350) {
		document.getElementById('warning').innerHTML = maxedOutText;
	}
	else {
		document.getElementById('warning').innerHTML = "";
	}	
	colorCheck();
}
 
function updateCounter(field,maxlength,id,counter) {
	var totalLength = field.value.length;
	if(totalLength >= maxlength) {
		field.value = field.value.substring(0, maxlength);
		document.getElementById('warning').innerHTML = maxedOutText;
	}
	else {
		document.getElementById('warning').innerHTML = "";
	}	
	document.getElementById(counter).innerHTML = maxlength-field.value.length; // update the HTML to show the new number
	colorCheck(); // run a color check
}
 
function colorCheck() {
	// define some variables
	var textfield = document.getElementById('text');
	var countfield = document.getElementById('countArea');
 
	// check color codes
	if(textfield.value.length < 200) {
		countfield.style.color = "#45701a";	// color for good
	}
	else if(textfield.value.length > 330) {
		countfield.style.color = "#a52b2b"; // color for bad
	}
	else {
		countfield.style.color = "#333333"; // color for okay
	}	
}

So breaking it down, you’ll see that the first line of code calls a function called init whenever the page loads. Let’s examine that function now:

function init() {
	document.getElementById('countArea').innerHTML = 350-document.getElementById('text').value.length;
	if(document.getElementById('text').value.length >= 350) {
		document.getElementById('warning').innerHTML = maxedOutText;
	}
	else {
		document.getElementById('warning').innerHTML = "";
	}	
	colorCheck();
}

So you’ll see the first line of the code finds an element on the page with an id of countArea (where we’re storing the live updater on the page to show how many characters we have left) and adjust the amount to be correct. This is useful for if the user has entered some text already and then refreshes the page. This function will be called, get the new total (which wouldn’t be 350 if the user has entered text) and sets that to be the value inside the update area.

After that you’ll see an if statement that says “if the length of the textarea is longer than or equal to 350, show the maxed out error”. The maxed out error text is stored in a variable at the top of the page, right under the line that calls the init function. This message shows whenever the user has no characters left to type, and this is called in the init function for the same reason as the last: if the user refreshes the page, we want to make sure we still have everything updated.

You’ll see that the last line in here calls a function called colorCheck(). Let’s look at this function now, which is at the bottom of the code.

function colorCheck() {
	// define some variables
	var textfield = document.getElementById('text');
	var countfield = document.getElementById('countArea');
 
	// check color codes
	if(textfield.value.length < 200) {
		countfield.style.color = "#45701a";	// color for good
	}
	else if(textfield.value.length > 330) {
		countfield.style.color = "#a52b2b"; // color for bad
	}
	else {
		countfield.style.color = "#333333"; // color for okay
	}	
}

So you’ll see that the first two lines of code define 2 variables: one holds the element of the textarea, and the other holds the element of the updated area. These variables are not needed, they just make the code easier to work with and understand. The rest of the function is just a series of if else statements, which are used to check the amount of characters left to type. If there are 150 or fewer characters left, then the text in the updateArea turns from green to black. Along with this rule, if there are 19 or fewer characters left the text turns a dark red. These colors are just helpful cues for the users, to help them understand at a glance where they stand at the character limit.

Now that we understand how the colorCheck function works, lets check out the only function left for review. This is the updateCounter function, which is called whenever something is entered into the textarea.

function updateCounter(field,maxlength,id,counter) {
	var totalLength = field.value.length;
	if(totalLength >= maxlength) {
		field.value = field.value.substring(0, maxlength);
		document.getElementById('warning').innerHTML = maxedOutText;
	}
	else {
		document.getElementById('warning').innerHTML = "";
	}	
	document.getElementById(counter).innerHTML = maxlength-field.value.length; // update the HTML to show the new number
	colorCheck(); // run a color check
}

This is the only function that takes any parameters, and it takes 4 of them. The first parameter is ‘field’, which is just the textarea itself. The easiest value to pass to this function is “this”, which would just send the field itself. However if you wanted to have another field updated, it would be a simple work-around. The next param to pass is ‘maxlength’, which should be self-explanatory, but it is the maximum characters you want to allow to be typed into the text field. The 3rd param is ‘id’, which is just simple the id of the textarea or textfield being checked. And now last but not least, we pass it ‘counter’, which is the id of the count area that will be updated with the new number. In our example, we are passing countArea.

The first if statement you’ll see is checking if the length of the field is greater than the amount allowed. If this turns out to be true and the user tries to type any more characters, they are deleted and the cursor is brought back to their 350th character. Plus, it shows the warning message saying that the user has maxed out their character count. The else clause just sets the warning message to nothing when the user hasn’t maxed out their count.

The next two lines of code are very simple. The first line sets the innerHTML of the updateArea to be the current value of the text area, which is indeed very important. And underneath that we just see that the colorCheck() function is called again, which will update the color if need be.

So that’s the simple tutorial! If you are a JavaScript whiz and want to go ahead and edit the script a bit, feel free to mess around with it. Also I am pretty sure that I haven’t made any errors as it works fine with me, but if there are any errors just let me know.

Download .zip

JavaScript, Tutorials |