By 06/02/2014 7 Comments

How To Limit Number Of Characters In a Multiline ASP.NET TextBox using jQuery

TextBox support Limited number of characters

  • We have a website which allows users to posting their comments, we allow users that they can write only 50 characters per post
  • It can be easily achieved in asp.net using JQuery

Following code describes that how to limit number of characters in multiline textbox control in asp.net using JQuery

In this example, we first capture the keyup event and calculate the number of characters in the textbox. If the character exceeds the limit of the textbox (50 characters), the additional characters entered by the user is disallowed.

JQuery Code snippet

    <script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script> <!--- import jquery library --->
    <script>
        $(document).ready(function() { // method called, when document loaded by browser

            var limit = 50; // initialize a variable with 50

            $('[id$="TT_TextBox1"]').keyup(function() { // textBox1 calls the unknown function and trigger the keyup() function, this happens when user starts typing inside textbox control

                var len = $(this).val().length; // get the total characters of a textbox which is written inside it. this can be achieved by using val() and length property, assign it into len variable

                if (len > limit) { // check if a user types characters in textBox more than specifies limit
                 this.value = this.value.substring(0, limit); // substring() reset characters into 0
                 }
                $('#TT-paragraph').text(limit - len + " characters left"); // display the status about how many characters you have

                });

            });

    </script>

ASP.NET Code snippet

<!--- Following code renders textarea and a label control --->
<asp:Label runat="server" Text="Type into this textbox which accepts 50 characters overall"></asp:Label>
        <br/>
        <asp:TextBox ID="TT_TextBox1" runat="server" Text="" TextMode="MultiLine" /><br /><br />
        <p id="TT-paragraph"></p>






Posted in: ASP.NET, jQuery

Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .