Home » Development » Calculating the remaining character count in TextBox in ASP.NET

Calculating the remaining character count in TextBox in ASP.NET

In order to show your users how many characters they can enter in a specific TextBox, use the code below. I used ASPxMemo which is a component from DevExpress but it is similar in regular TextBox of Visual Studio.

Character remaining feature
Character remaining feature

Note: There are extra configuration to limit the count of characters that is allowed in ASPxMemo. These configuration uses InitMemoMaxLength, EnableMaxLengthMemoTimer and DisableMaxLengthMemoTimer functions in Javascript code.

<dx:ASPxMemo ID="memoNote" runat="server" Height="98px" Width="216px" MaxLength="250">
<ClientSideEvents Init="function(s, e) { InitMemoMaxLength(s, 250); RecalculateCharsRemaining(s); }"
GotFocus="EnableMaxLengthMemoTimer" LostFocus="DisableMaxLengthMemoTimer"
KeyDown="RecalculateCharsRemaining" KeyUp="RecalculateCharsRemaining" />
</dx:ASPxMemo>

<div style="text-align: right"> Characters remaining: 
<dx:ASPxLabel ID="memoNote_cr" runat="server" Text="" EnableClientSideAPI="True" Font-Bold="True" Font-Size="X-Small">
</dx:ASPxLabel>&nbsp;</div>

Javascript:

// Character remaining
function RecalculateCharsRemaining(editor) {
    var maxLength = parseInt(editor.maxLength ? editor.maxLength : editor.GetInputElement().maxLength);
    var editValue = editor.GetValue();
    var valueLength = editValue != null ? editValue.toString().length : 0;
    var charsRemaining = maxLength - valueLength;
    SetCharsRemainingValue(editor, charsRemaining >= 0 ? charsRemaining : 0);
}
function SetCharsRemainingValue(textEditor, charsRemaining) {
    var associatedLabel = ASPxClientControl.GetControlCollection().Get(textEditor.name + "_cr");
    var color = GetLabelColor(charsRemaining).toString();
    associatedLabel.SetText("<span style='color: " + color + ";'><b>" + charsRemaining.toString() + "</b></span>");
}
function GetLabelColor(charsRemaining) {
    if (charsRemaining < 5) return "red";
    if (charsRemaining < 12) return "#F3A250";
    return "green";
}

// ASPxMemo - MaxLength emulation
function InitMemoMaxLength(memo, maxLength) {
    memo.maxLength = maxLength;
}
function EnableMaxLengthMemoTimer(memo) {
    memo.maxLengthTimerID = window.setInterval(function () {
        var text = memo.GetText();
        if (text.length > memo.maxLength) {
            memo.SetText(text.substr(0, memo.maxLength));
            RecalculateCharsRemaining(memo);
        }
    }, 50);
}
function DisableMaxLengthMemoTimer(memo) {
    if (memo.maxLengthTimerID) {
        window.clearInterval(memo.maxLengthTimerID);
        delete memo.maxLengthTimerID;
    }
}

Ned Sahin

Blogger for 20 years. Former Microsoft Engineer. Author of six books. I love creating helpful content and sharing with the world. Reach me out for any questions or feedback.

1 thought on “Calculating the remaining character count in TextBox in ASP.NET”

  1. This code was great. Exactly what I needed. The only thing that I had to change was the associated variable. Instead I used the name of the label. Thank you

    Reply

Leave a Comment