Character Counter for ASP.Net TextArea or MultiLine TextBox Using jQuery
We all know that the MaxLength property of ASP.Net mulitline textbox will not work. To set a max length to a mulitline textbox we need to rely on javascript techniques.
Read my code snippet Limit Number of Characters in MultiLine ASP.Net TextBox or TextArea Using jQuery to know more.
It will be very user friendly if we include a charcter counter just below the textarea to let the users know the remaning number of characters he can type. The below jQuery snippet will restrict the maximum no of characters a user can type with a simple charcter counter displayed at the bottom of the textarea.
<head runat="server">
<title></title>
<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
//Set the Variable for max length
var MaxLength = 100;
$('#txtCount').val(MaxLength);
$('#TextBox1').keyup(function() {
if ($(this).text().length > MaxLength) {
$(this).text($(this).text().substring(0, MaxLength));
}
$('#txtCount').val(MaxLength - $(this).text().length);
});
$('#TextBox1').blur(function() {
if ($(this).text().length > MaxLength) {
$(this).text($(this).text().substring(0, MaxLength));
}
$('#txtCount').val(MaxLength - $(this).text().length);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"
TextMode="MultiLine" Rows="10"></asp:TextBox><br />
<asp:TextBox ID="txtCount" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
Happy Coding!!
|