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" %>
  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>
  8. <script src="jquery-1.8.2.js" type="text/javascript"></script>
  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. });
  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>
  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