Ultimate Character Counter

JavaScriptSource Staff Aug 21, 2006

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://www.javascriptsource.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!

Leave a Response

(2 comments)

Excellent code. Thank-You.

Arturo Jul 16, 2012

Excellent example script code. Thnx a ton...

Pradnya Mar 29, 2012

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Ultimate Character Counter

Leave a Response

Attention JavaScript Coders

Go Deeper