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

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