- New Addition to adButterfly Network FeaturedJuly 9, 2010
- Fresh Wallpapers Featured, GraphicsSeptember 4, 2009
- Whiskey Air Theme Featured, Themes, WordPressSeptember 2, 2009
Javascript Character Counter For Text Areas
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:
Tweet This
Digg This
Save to delicious
Stumble it
RSS Feed
4 Comments
Code for the simple word count works gr8 thanks a lot….
emm… interesting.
sounds amazing and will work
[...] Hack Mit Hilfe von einem gefundenen Script habe ich mir noch einen Hack gebastelt. Der Hack macht folgendes… … er zeigt mir, wie [...]
Hello, it really interesting, thanks
[...] on this topic.Powered by WP Greet Box WordPress Plugin Shared Plugins | jQuery Plugins. Shared Javascript Character Counter For Text Areas | Blog Tycoon. Listened to Clouds Over California – DevilDriver. Listened to Bound By The Moon – [...]