javascript character counter count number characters entered in text field

Example text area with javascript character counter

If you plan on only accepting a fixed number of characters from a textarea, its probably a good idea to tell the user how many they have left. This examples demostrates using javascript to count the number of characters entered in a textarea. Actually, you can use this to figure out how many characters where entered in any kind of input field. Requires the javascript functions in counter_funcs.js.

Here is a demo of the javascript character counter so you can see what its like. Read on to find out how it works.

This bare bones form demonstrates the HTML before adding character counting code. An id attribute is added to the textarea and is required to use the javascript functions. This makes it simple to get the element object regardless of browser. A span with an id attribute "text_counter" will give the user feedback on number of characters remaining. Spaces and line feeds are counted as characters.

<!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>
  <title></title>
</head>
<body>
    <form action="" method="get">
    Enter up to 20 characters:<br />
    <textarea id="text_fld" name="text_fld" rows="4" cols="40"></textarea><br />
    <span id="text_counter">20</span> characters left<br />
    <input type="submit" />
  </form>
</body>
</html>

Here is how the javascript works:

Include the counter_funcs.js script
Make a javascript variable that stores the maximum string length you want to allow. This way if you want different string lengths in the future, or on different forms where you use this technique, you only have to change that value in one place. In this case its called MAX. The block of javascript looks like this:

    <script type="text/javascript">
    /*<![CDATA[*/
        // declare how many characters you want to allow
        var MAX = 20;
    /*]]>*/
    </script>

Tell javascript to call the update_counter() function everytime the user presses a key when they are typing in the textarea by adding an onkeyup event handler to the textarea. The function takes three arguments: the id of the element that displays the number of characters remaining, the id of the widget we are counting characters in and the maximum number of characters allowed.

    <textarea id="text_fld" name="text_fld" rows="4" cols="40" 
     onkeyup="update_counter('text_counter', 'text_fld', MAX)"></textarea><br />

Finally the whole point of this is to not allow text greater than MAX characters to be submitted so lets make the form on submission invoke check_content_length() which takes two arguments: the id of the element we are counting characters in and the maximum number of characters allowed.

<!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>
  <!-- load counter functions -->
    <script type="text/javascript" src="/scripts/counter_funcs.js"></script>
    <!-- set the maximum character length value for the field -->
    <script type="text/javascript">
    /*<![CDATA[*/
        // declare how many characters you want to allow
        var MAX = 20;
	/**
	 * Onsubmit handler for form.
	 * This function allows display of custom alert message if too
	 * many characters are entered
	 */
	function check_char_length(elem_id, max_len)
	{
	    if(check_content_length(elem_id, max_len)) {
		return true;
	    } else {
		// too many chars
		alert("Maximum input length is " + max_len + " characters");
		return false;
	    }
	}
    /*]]>*/
    </script>
  <title></title>
</head>
<body>
  <form action="" method="get" onsubmit="return check_char_length('text_fld', MAX);">
    Enter up to 20 characters:<br />
    <textarea id="text_fld" name="text_fld" rows="4" cols="40" 
     onkeyup="update_counter('text_counter', 'text_fld', MAX)"></textarea><br />
    <span id="text_counter">20</span> characters left<br />
    <input type="submit" />
  </form>
</body>
</html>

Try javascript character counter.

If the textarea element already contains text we need to deduct that from the remaining character count by using an onload event handler in the body tag.

<body onload="update_counter('text_counter','text_fld', MAX);">

Javascript character count for textarea with default text.

Older Version

Here is the original page from phpfunk.com on counting characters in a textfield using javascript.