Limit the text length in MultiLine Textbox using Javascript

Sandeepv
Posted by in ASP.NET category on for Beginner level | Views : 12253 red flag

Restricting the length of text entered by User in a multiline textbox.


 Download source code for Limit the text length in MultiLine Textbox using Javascript

Restrict the Text Entered 
During one of my projects I came across a requirement wherein , I had to create a feedback form, 
where the user had to provide feedback to the organization , but not more than 6000 in lenght.

At that time i found that even though i restrict the length of my multiline textbox it would still take more 
than 6000 alphabets.

JavaScript to the Rescue
so I created a custom Javascript method fnKeepWordLenTrack() and used it in the onblur and onkeyup events of Textbox.
and  CountText() function in onKeyPress event of Textbox to stop inputing by user when he corsses his maximum permitted limit,
in my case which was 6000.
I also gave the user a dynamic display of the number of letters left for 
him to type or enter.
Limit Conqured!!

Rest is history ..  since the code and demo project is uploaded for your convenience.


 Code Snippet :Simply Past and Restric --Enjoy

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Feedback Page</title>
    <script language="JavaScript" type="text/javascript">

    
        function CountText(field, maxlimit) {

            if (field.disabled == false) {
                if (field.value.length < maxlimit) // if too long...trim it!
                {
                    return true;
                }
                else
                    return false;
            }
        }
        
        function fnKeepWordLenTrack(keyevnt, field, maxlimit) 
{
            var txtRemLen = document.getElementById("txtRemLen");
            txtRemLen.value = maxlimit - field.value.length;
            if (field.value.length > maxlimit)
                field.value = field.value.substr(0, maxlimit);
        }
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    Please Enter Your Feedback in no more than 6000 alphabets<br />
        <asp:TextBox ID="txtFeedback" runat="server" autocomplete="off" Height="198px" 
            MaxLength="6000" onblur="return fnKeepWordLenTrack(event,this,6000);" 
            onkeypress="return CountText(this,6000);" 
            onkeyup="return fnKeepWordLenTrack(event,this,6000);" TextMode="MultiLine" 
            Width="65%" BackColor="#D7EBFF"></asp:TextBox>
    
    </div>
    <p>
        <input id="txtRemLen" maxlength="4" name="remLen" readonly="readonly" size="4" 
            style="width: 41px; height: 22px;" type="text" /><asp:Label 
            ID="lblAlphabetsLeft" runat="server" Font-Size="10pt" 
            Text="alphabets left"></asp:Label>
    </p>
    </form>
</body>
</html>

Page copy protected against web site content infringement by Copyscape

About the Author

Sandeepv
Full Name: Sandeep V
Member Level: Starter
Member Status: Member
Member Since: 9/13/2009 10:22:53 PM
Country:



Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)