Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
SQL Server

Limiting Multiple Field Length on Web Form.

Author: DevASP
Download Source Code :

This article is about how you can limit the length of multiple form fields and updates the screen information as the text is entered in the fields.

Steps you will do.


Start visual studio and create a new web application. Open the HTML design of your web page and add the following JavaScript functions before closing the head tag.



<script type="text/javascript">


      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;






Add the following HTML code to design the layout of your web page and call the above JavaScript functions.



<body MS_POSITIONING="GridLayout">




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



<strong>Textarea 2</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>



<strong>Textarea 3</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>




Dont forget to visist<br>

<a href=""></a>






Run your application and enter text in the fields and see the maximum length validation of multiple fields.

Article Comments
It works well.
Also how to move to the next texbox automatically when maximum characters entered?

Posted on 12/23/2006 3:48:57 PM by anbu Amirth

Add Article Comment:
Name :
Email Address :
Comments :
<< How We can Display a Count Down Timer Control on our Web Form.

Disclaimer - Privacy
© 2002-2017