Post
Ask Question

Limit And Show Char In TextBox using jQuery

In this blog, I am going to show how we can limit the number of character in a text box and show how many character are left to type in ASP.NET c# using jQuery.

See given below code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title>Limit & Show Character Length</title>  
  7.   
  8.     <script src="jquery-1.8.2.js" type="text/javascript"></script>  
  9.   
  10.     <script type='text/javascript'>  
  11.         $(function() {  
  12.             // Checking Address Length  
  13.             $('#txtAddress').keyup(function() {  
  14.                 var Address = $('#txtAddress').val();  
  15.                 var Addresslen = Address.length;  
  16.                 if (Address.length >= 250) {  
  17.                     this.value = this.value.substring(0, 250);  
  18.                 }  
  19.                 $('#spanAddress').text(250 - Addresslen + ' Characters Left');  
  20.             });  
  21.   
  22.             //Checking Description Length  
  23.             $('#txtDescription').keyup(function() {  
  24.                 var Description = $('#txtDescription').val();  
  25.                 var Descriptionlen = Description.length;  
  26.                 if (Description.length >= 500) {  
  27.                     this.value = this.value.substring(0, 500);  
  28.                 }  
  29.                 $('#spanDescription').text(500 - Descriptionlen + ' Characters Left');  
  30.             });  
  31.         });  
  32.     </script>  
  33.   
  34. </head>  
  35. <body>  
  36.     <form id="form1" runat="server">  
  37.     <div>  
  38.         <table cellpadding="5" cellspacing="5" width="90%" align="center" style="background-color: SkyBlue;">  
  39.             <tr>  
  40.                 <td align="center" colspan="2" style="background-color: Green; font-weight: bold;  
  41.                     font-size: 14pt; color: Blue; font-family: Verdana;">  
  42.                     Registration Form  
  43.                 </td>  
  44.             </tr>  
  45.             <tr>  
  46.                 <td align="right" width="40%">  
  47.                     Name #:  
  48.                 </td>  
  49.                 <td>  
  50.                     <asp:TextBox ID="txtName" runat="server" Width="250px"></asp:TextBox>  
  51.                 </td>  
  52.             </tr>  
  53.             <tr>  
  54.                 <td align="right">  
  55.                     Email #:  
  56.                 </td>  
  57.                 <td>  
  58.                     <asp:TextBox ID="txtEmail" runat="server" Width="250px"></asp:TextBox>  
  59.                 </td>  
  60.             </tr>  
  61.             <tr>  
  62.                 <td align="right">  
  63.                     Address:  
  64.                 </td>  
  65.                 <td style="color: Red; font-family: Verdana; font-size: 10pt;">  
  66.                     <asp:TextBox ID="txtAddress" runat="server" TextMode="MultiLine" Height="70px" Width="250px"></asp:TextBox><br />  
  67.                     (<span id="spanAddress">250 Characters left</span>)  
  68.                 </td>  
  69.             </tr>  
  70.             <tr>  
  71.                 <td align="right">  
  72.                     About Your Self #:  
  73.                 </td>  
  74.                 <td style="color: Red; font-family: Verdana; font-size: 10pt;">  
  75.                     <asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" Height="70px"  
  76.                         Width="250px"></asp:TextBox><br />  
  77.                     (<span id="spanDescription">500 Characters left</span>)  
  78.                 </td>  
  79.             </tr>  
  80.             <tr>  
  81.                 <td>  
  82.                 </td>  
  83.                 <td>  
  84.                     <asp:Button ID="btnSubmit" runat="server" Text="Submit" />  
  85.                 </td>  
  86.             </tr>  
  87.         </table>  
  88.     </div>  
  89.     </form>  
  90. </body>  
  91. </html>  
Now Run the Application.

registration form
                                                                              Image 1 
Next Recommended Reading Showing Page Loader Using JQuery in ASP.NET