Category: JavaScript

Javascript Character Counter For Text Areas

Chip on January 2, 2009

submit to reddit

  • Sharebar

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) {
DOM=1
};
function txtshow(txt2show) {
if (DOM) {
var viewer = document.getElementById("txtmsg");
viewer.innerHTML=txt2show;
}
else if(IE) {
document.all["txtmsg"].innerHTML=txt2show;
}
}
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';
txtshow(showstr);
}
//-->
</script>

The form with the text area:


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

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;
}
</script>

The form with the text area:


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

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);
else
cntfield.value = maxlimit - field.value.length;
}
</script>

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
</form>

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

Download the 3 versions below:

6 Responses to Javascript Character Counter For Text Areas

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>