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