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

