getButterfly Logo getButterfly code wrangling since 2005

I’ve been searching for a character counter for one of my link directories. The Description field is supposed to hold about 400 characters. More than that looks like spam.

So I’ve searched the Internet and found several good solutions and loads of crappy ones. Here is what I found and I’m currently using.

1. Feedback message

<script type="text/javascript">
maxKeys = 50;
var IE = (document.all) ? 1 : 0;
var DOM = 0;
if (parseInt(navigator.appVersion) >=5) {
function txtshow(txt2show) {
if (DOM) {
var viewer = document.getElementById("txtmsg");
else if(IE) {
function keyup(what) {
var str = new String(what.value);
var len = str.length;
var showstr = len + " characters of " + maxKeys + " recommended";
if (len > maxKeys) showstr += '<br>Some information will be lost, please revise your entry';

The form with the text area:

<textarea cols="40" rows="5" onkeyup="keyup(this)"></textarea>

And finally the feedback message:

<div id="txtmsg">0 characters of 50 recommended</div>

Be careful when modifying values. If you need to increase the characters, do it both in Javascript and in the feedback div. Also, if you want to change the feedback message, remember that it should match the one in Javascript.

2. Simple message

<script type="text/javascript">
function textCounter(textarea, counterID, maxLen) {
cnt = document.getElementById(counterID);
if (textarea.value.length > maxLen) {
textarea.value = textarea.value.substring(0,maxLen);
cnt.innerHTML = maxLen - textarea.value.length;

The form with the text area:

<textarea name="text_area" cols="50" rows="5" onkeyup="textCounter(this,'count_display',3500);" onblur="textCounter(this,'count_display',3500);"></textarea>

And the message:

<span id="count_display">3500</span> characters remaining.

3. Multiple text areas

<script type="text/javascript">
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);
cntfield.value = maxlimit - field.value.length;

And the form:

<form name="myForm">
<textarea name="message1" cols="28" rows="5" onkeydown="textCounter(document.myForm.message1,document.myForm.remLen1,125)" onkeyup="textCounter(document.myForm.message1,document.myForm.remLen1,125)"></textarea>
<br />
<input readonly="readonly" type="text" name="remLen1" size="3" maxlength="3" value="125" /> characters left
<br />
<textarea name="message2" cols="28" rows="5" onkeydown="textCounter(document.myForm.message2,document.myForm.remLen2,125)" onkeyup="textCounter(document.myForm.message2,document.myForm.remLen2,125)"></textarea>
<br />
<input readonly="readonly" type="text" name="remLen2" size="3" maxlength="3" value="125" /> characters left

That’s all. Remember to place the Javascript code in <head> section or, better, externalize it.

Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.

If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

6 thoughts on “Javascript Character Counter For Text Areas

Leave a reply

Love programming?

Learn about the most amazing things. Get smarter everyday!