Tag: textbox character limit

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.

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