Count TextArea/TextBox Character in ASP.Net using jQuery

In this article, we created a demo that count the character you entered into textarea using ASP.NET and jQuery plugins.

In this demo, we will use NobleCount jQuery plugins. You can download plugins from below url -
http://tpgblog.com/noblecount/

So, In this demo, first download jQuery plugins from above url and add jquery into your project as below -

<script src="Script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="Script/jquery.NobleCount.min.js" type="text/javascript"></script>

Now, Add Textbox and change Textbox TextMode Properties to MultiLine as shown below code -

<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" TextMode="MultiLine" runat="server">
        </asp:TextBox>
         <span id='count1'></span> Characters
    </div>
    </form>

Now, add below script -

<script type="text/javascript">
        $(document).ready(function () {
            $('#<%= TextBox1.ClientID %>').NobleCount('#count1', {
                max_chars: 160,
                block_negative: true
            });
        });
      </script>

If you use TextBox inside update panel then use below script -

    <script type="text/javascript">
        $(document).ready(function () {
            $('#<%= TextBox1.ClientID %>').NobleCount('#count1', {
                max_chars: 160,
                block_negative: true
            });
        });
     
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
            $('#<%= TextBox1.ClientID %>').NobleCount('#count1', {
                max_chars: 160,
                block_negative: true
            });
        });
      </script>

In above you can change max_char: 160 to any character. block_negative: true options validate the TextBox (doesn't allow enter text after max_char).

Demo

Download Complete Source Code