ASPxTextBoxBase.MaxLength Property
Gets or sets the maximum number of characters an end user can enter into the editor.
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v23.2.dll
NuGet Package: DevExpress.Web
Declaration
Property Value
| Type | Default | Description |
|---|---|---|
| Int32 | 0 | A positive integer specifying the maximum number of characters end users can enter. 0 to disable the length limit on the text. |
Remarks
This property is a wrapper of the TextBoxPropertiesBase.MaxLength property.
Example
When inputting a value into a text box whose maximum length is limited, it could be useful for end-users to know how many characters they still can type. This example demonstrates how to implement this feature.The number of remaining characters is printed on a label near the editor. In this example we're using the MaxLength property of the ASPxTextBox, which allows us to specify the maximum length of the ASPxTextBox control. However, the ASPxMemo does not have this property, because the <textarea> HTML element doesnt support a native maxlength attribute. That's why the MaxLength-functionality for the ASPxMemo is implemented here in a roundabout way using a timer to check every 50ms of the memo text's length and trim the text if necessary.See also:
ASPxMemo - How to limit the length of text that can be entered into the control using MaxLength
<head runat="server">
<title>Example</title>
<script type="text/javascript">
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 + ";'>" + charsRemaining.toString() + "</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;
}
}
</script>
<link href="Style.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<fieldset>
<legend>ASPxTextBox</legend>
<dxe:ASPxTextBox ID="tbTextBox" runat="server" Width="172px" MaxLength="22">
<ClientSideEvents Init="RecalculateCharsRemaining" KeyDown="RecalculateCharsRemaining" KeyUp="RecalculateCharsRemaining" />
</dxe:ASPxTextBox>
<span class="chrm">
Characters remaining: <dxe:ASPxLabel ID="tbTextBox_cr" runat="server" EnableClientSideAPI="True" />
</span>
</fieldset>
<fieldset>
<legend>ASPxMemo</legend>
<dxe:ASPxMemo ID="txtMemo" runat="server" Rows="4" Columns="30">
<ClientSideEvents
Init="function(s, e) { InitMemoMaxLength(s, 22); RecalculateCharsRemaining(s); }"
GotFocus="EnableMaxLengthMemoTimer" LostFocus="DisableMaxLengthMemoTimer"
KeyDown="RecalculateCharsRemaining" KeyUp="RecalculateCharsRemaining" />
</dxe:ASPxMemo>
<span class="chrm">
Characters remaining: <dxe:ASPxLabel ID="txtMemo_cr" runat="server" EnableClientSideAPI="True" />
</span>
</fieldset>
</form>
</body>