Text Counter

Spudinski · April 27, 2008

This how-to will show you how to create an text counter with javascript.

On many websites you will come across this little thing, it isn't of much benefit to the developer, but it helps the visitors to see how much space they have left to type.

You will need to create two HTML elements for this to work, they must be as follows:

An textarea element, or an input element, really just any element that has an value attribute.

<textarea id="textarea" onkeypress="countTxt(this, 'counter')"></textarea>

We need to add the onkeypress event to the element, this will send the parameters to our function.

An span or div element, again anything with that is able to hold HTML within it(modification script to support value attributes is possible).

<span id="counter">100</span> characters left.

var max_length = 100;

Here a variable containing the maximum length of the elment is set.

function countTxt(textarea, counter_id) {

Create a function called countTxt that needs two parameters, the textarea object, and counter_id which holds the id of the element we are going to use to hold the count.

counter = document.getElementById(counter_id);

We need to set a variable to hold the object that holds the count.

length = textarea.value.length;

We need the length of the textarea element, so that we can use it further on, so we just make the length of it a variable.

if (length > max_length) {
   textarea.value = textarea.value.substring(0, max_length);
}

Creating an if statement to check if the length of the textarea is greater than the value of the max length variable that we set easier on.

When the statement returns true, it means that the user has entered more text than we have set is allowed.

Now using the substring function, we trim off all the characters that is after the last allowed character, we also write back to the textarea element in the process.

else {
   counter.innerHTML = max_length - length;
}

When the above if statement returns false, the textarea element has less characters than we are allowing the user to use.

We now then update the counter element which is used for displaying the amount of character let for use, to this we subtract the length of the textarea element from the maximum amount variable called max_length.

(if we want to use a [/i]input[/i] element, we would use "counter.value" rather than "counter.innerHTML")

	return true;
}

Everything has been done now, so we make our function return true since we assume nothing could have gone wrong.

Here is the complete script:

<html>
<head>
<title>Counter Test</title>
<script type="text/javascript">
var max_length = 100;
function countTxt(textarea, counter_id) {
counter = document.getElementById(counter_id);
length = textarea.value.length;
if (length > max_length) {
	textarea.value = textarea.value.substring(0, max_length);
}
else {
	counter.innerHTML = max_length - length;
}
return true;
}
</script>
</head>
<body>
<textarea id="textarea" onkeypress="countTxt(this, 'counter')"></textarea>

<span id="counter">0</span> characters left
</body>
</html>

References:

http://www.w3schools.com/jsref/jsref_length_string.asp

http://www.w3schools.com/jsref/jsref_substring.asp

http://www.w3schools.com/js/js_events.asp