The JavaScript Source: Forms : Ultimate Character Counter

Home

Ultimate Character Counter

This script limits the length of multiple form fields and updates the screen as information is entered. It can easily be added to an existing script.

The JavaScript Source: Forms : Ultimate Character Counter

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: kojak :: http://commoncoder.com */

// fieldname, warningname, remainingname, maxchars
function CheckFieldLength(fn,wn,rn,mc) {
  var len = fn.value.length;
  if (len > mc) {
    fn.value = fn.value.substring(0,mc);
    len = mc;
  }
  document.getElementById(wn).innerHTML = len;
  document.getElementById(rn).innerHTML = mc - len;
}

<form>
<strong>textarea 1</strong><br>
<textarea name="taMessage" id="taMessage" cols="40" rows="5"
onkeyup="CheckFieldLength(taMessage, 'charcount', 'remaining', 20);" onkeydown="CheckFieldLength(taMessage, 'charcount', 'remaining', 20);" onmouseout="CheckFieldLength(taMessage, 'charcount', 'remaining', 20);"></textarea><br>
<small><span id="charcount">0</span> characters entered.   |   <span id="remaining">20</span> characters remaining.</small><br>
<br>
<strong>textbox 1</strong><br>
<input type="text" name="txtbox" id="txtbox" size="50" maxlength="50"
onkeyup="CheckFieldLength(txtbox, 'charcount3', 'remaining3', 10);" onkeydown="CheckFieldLength(txtbox, 'charcount3', 'remaining3', 10);" onmouseout="CheckFieldLength(txtbox, 'charcount3', 'remaining3', 10);"/><br>
<small><span id="charcount3">0</span> characters entered.   |   <span id="remaining3">10</span> characters remaining.</small><br>
<br>
<strong>textarea 2</strong><br>
<textarea name="taMessage2" id="taMessage2" cols="40" rows="5"
onkeyup="CheckFieldLength(taMessage2, 'charcount2', 'remaining2', 50);" onkeydown="CheckFieldLength(taMessage2, 'charcount2', 'remaining2', 50);" onmouseout="CheckFieldLength(taMessage2, 'charcount2', 'remaining2', 50);"></textarea><br>
<small><span id="charcount2">0</span> characters entered.   |   <span id="remaining2">50</span> characters remaining.</small><br>
</form>

Did you use this script? Do you like this site? Please link to us!

Add a comment, suggestion, or correction

Comments feed

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]