Tab
A newer version of this page is available. Switch to the current version.

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.v18.2.dll

Declaration

[DefaultValue(0)]
public virtual int MaxLength { get; set; }
<DefaultValue(0)>
Public Overridable Property MaxLength As Integer

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.

Examples

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

How to set the text max length in the ASPxMemo control

<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>
See Also