Learn ASP.NET Core 2 and Angular 6 in October 2018. Instructor-led online courses by Bipin Joshi. Read more...
Instructor-led Online Courses by Bipin Joshi : ASP.NET Core | Angular | Design Patterns
Registration open for October 2018 batches. Read more here.

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;
}

 


Bipin Joshi is a software consultant, trainer, author and spiritual yoga mentor having 23+ years of experience in software development. He teaches private online courses in ASP.NET Core and Angular to individuals and small groups. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.

He will be teaching ASP.NET Core 2.1 and Angular 6.1 in October 2018. Click here for his online course schedule and more details.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 15 December 2010


Tags : ASP.NET AJAX Web Forms Server Controls jQuery JavaScript