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

Limiting Multiple Field Length on Web Form.

Author: DevASP
Download Source Code : 609_LimitLength.zip

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;

      }

 

    </script> 

 

 

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

 

 

<body MS_POSITIONING="GridLayout">

<form>

<center>

 

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

 

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

 

</form>

 

Dont forget to visist devasp.com<br>

<a href="http://www.devasp.com">www.devasp.com</a>

</center>

 

</body> 

 

 

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?
Thanks
Anbu

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 DevASP.net