The JavaScript Source: Forms : Ultimate Character Counter

Internet.com - The Network for Technology Professionals

Events
- JupiterEvents
- internet.com/webcasts
Jobs
Partners
Solutions
- eBooks
- Video
Shop

Home

Forms

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

<script type="text/javascript" src="charCount.js"></script>

<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!

Sign up for the JavaScript Weekly

internet.com Privacy Policy

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

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks
IBM eBook: Planning a Service Oriented Architecture IBM eBook: Choosing the Right Architecture--What It Means for You and Your Business Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape? Avaya Article: Using Intelligent Presence to Create Smarter Business Applications Intel Go Parallel Article: Getting Started with TBB on Windows Microsoft Article: 7.0, Microsoft's Lucky Version? Avaya Article: How to Feed Data into the Avaya Event Processor		IBM Article: Developing a Software Policy for Your Organization Microsoft Article: Managing Virtual Machines with Microsoft System Center Intel Go Parallel Article: Intel Threading Tools and OpenMP HP eBook: Storage Networking , Part 1 Microsoft Article: Solving Data Center Complexity with Microsoft System Center Configuration Manager 2007 MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts
HP Video: StorageWorks EVA4400 and Oracle HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind		Microsoft Silverlight Video: Creating Fading Controls with Expression Design and Expression Blend 2 MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits
Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook Iron Speed Designer Application Generator		MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos
Silverlight 2 App and Walkthrough: Leverage Silverlight 2 with SQL Server and XML IBM Article: Enterprise Search--Do You Know What's Out There? HP Demo: StorageWorks EVA4400		Microsoft Article: The Progress and Promise of Deep Zoom Microsoft How-to Article: Get Going with Silverlight and Windows Live MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES