CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Home > CodeDigest >  
Technologies
 


Character Counter for ASP.Net TextArea or MultiLine TextBox Using jQuery
Submitted By Satheesh Babu B
On 1/20/2010 8:57:49 AM
Tags: ASP.Net,CodeDigest,jQuery  

Character Counter for ASP.Net TextArea or MultiLine TextBox Using jQuery

We all know that the MaxLength property of ASP.Net mulitline textbox will not work. To set a max length to a mulitline textbox we need to rely on javascript techniques.
Read my code snippet Limit Number of Characters in MultiLine ASP.Net TextBox or TextArea Using jQuery to know more.

It will be very user friendly if we include a charcter counter just below the textarea to let the users know the remaning number of characters he can type. The below jQuery snippet will restrict the maximum no of characters a user can type with a simple charcter counter displayed at the bottom of the textarea.

<head runat="server">

    <title></title>

     <script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script language="javascript">

        $(document).ready(function() {

        //Set the Variable for max length

        var MaxLength = 100;

           

            $('#txtCount').val(MaxLength);

            $('#TextBox1').keyup(function() {

                if ($(this).text().length > MaxLength) {

                    $(this).text($(this).text().substring(0, MaxLength));

                }

                $('#txtCount').val(MaxLength - $(this).text().length);

            });

            $('#TextBox1').blur(function() {

                if ($(this).text().length > MaxLength) {

                    $(this).text($(this).text().substring(0, MaxLength));

                }

                $('#txtCount').val(MaxLength - $(this).text().length);

            });

        });

 

 </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

 

<asp:TextBox ID="TextBox1" runat="server"

TextMode="MultiLine" Rows="10"></asp:TextBox><br />

<asp:TextBox ID="txtCount" runat="server"></asp:TextBox>

</div>

 

    </form>

</body>

</html>

Happy Coding!!

Recent Codes
  • View All Codes..