Twitter like character counter - jQuery version
My recent article titled
Displaying a
Character Counter for Multiline Textboxes shows you how to create a
character counter like Twitter for multiline textboxes. The articles does so
using ASP.NET AJAX client behavior. Here is a jQuery version of the code that does
similar job. Note, however, that
unlike ASP.NET AJAX client behavior as illustrated in the article the following
code takes a "function" based approach to quickly implement similar
functionality.

Add the following in the <script> block :
$(document).ready(function() {
$("#TextBox1").keyup({ MaxLength: 20, Type: 'Remaining',
AllowOverflow: true }, OnKeyUp);
$("#TextBox1").blur(OnBlur);
$("#TextBox1").keyup();
})
function OnKeyUp(event) {
var text = $("#TextBox1").val();
if (text.length > event.data.MaxLength) {
if (!event.data.AllowOverflow) {
$("#TextBox1").text(text.substring(0, event.data.MaxLength));
}
}
var diff = 0;
if (event.data.Type == 'Remaining') {
diff = event.data.MaxLength - $("#TextBox1").val().length;
if (diff < 0) {
$("#lblCounter").removeClass("NormalCounter");
$("#lblCounter").addClass("WarningCounter");
}
else {
$("#lblCounter").removeClass("WarningCounter");
$("#lblCounter").addClass("NormalCounter");
}
}
else {
diff = $("#TextBox1").val().length;
if (diff > event.data.MaxLength) {
$("#lblCounter").removeClass("NormalCounter");
$("#lblCounter").addClass("WarningCounter");
}
else {
$("#lblCounter").removeClass("WarningCounter");
$("#lblCounter").addClass("NormalCounter");
}
}
$("#lblCounter").text(diff);
}
function OnBlur(event) {
$("#TextBox1").keyup();
}
Change MaxLength and Type to suit your requirements. Type can be Remaining or
Total. AllowOverflow if set to true allows you to exceed MaxLength and displays
counter in WarningCounter style. If AllowOverflow is false you cannot enter
beyond MaxLength value.
Also, add the following CSS classes in style sheet file or inline.
.NormalCounter
{
font-family:Arial;
font-size:25px;
color:Navy;
}
.WarningCounter
{
font-family:Arial;
font-size:25px;
color:Red;
}