Limit And Show Char In TextBox using jQuery

Rahul Saxena
Oct 20, 2014
5.7k
0
0
Blog

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:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Limit & Show Character Length</title>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function() {
// Checking Address Length
$('#txtAddress').keyup(function() {
var Address = $('#txtAddress').val();
var Addresslen = Address.length;
if (Address.length >= 250) {
this.value = this.value.substring(0, 250);
}
$('#spanAddress').text(250 - Addresslen + ' Characters Left');
});
//Checking Description Length
$('#txtDescription').keyup(function() {
var Description = $('#txtDescription').val();
var Descriptionlen = Description.length;
if (Description.length >= 500) {
this.value = this.value.substring(0, 500);
}
$('#spanDescription').text(500 - Descriptionlen + ' Characters Left');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellpadding="5" cellspacing="5" width="90%" align="center" style="background-color: SkyBlue;">
<tr>
<td align="center" colspan="2" style="background-color: Green; font-weight: bold;
font-size: 14pt; color: Blue; font-family: Verdana;">
Registration Form
</td>
</tr>
<tr>
<td align="right" width="40%">
Name #:
</td>
<td>
<asp:TextBox ID="txtName" runat="server" Width="250px"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
Email #:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" Width="250px"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
Address:
</td>
<td style="color: Red; font-family: Verdana; font-size: 10pt;">
<asp:TextBox ID="txtAddress" runat="server" TextMode="MultiLine" Height="70px" Width="250px"></asp:TextBox><br />
(<span id="spanAddress">250 Characters left</span>)
</td>
</tr>
<tr>
<td align="right">
About Your Self #:
</td>
<td style="color: Red; font-family: Verdana; font-size: 10pt;">
<asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" Height="70px"
Width="250px"></asp:TextBox><br />
(<span id="spanDescription">500 Characters left</span>)
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>