How to add maxlength attribute ?

[Mr Andrey Voronov]

Its not clear how to use AddAttributes method because it accept object parameter.

[Gopi Govindasamy]

Hi Andrey Voronov, 

  

Greetings from Syncfusion support. 

 

The AddAttributes method  is used to add multiple attributes depending on the key-value pair to the input element of the textbox. So you can add the maxlength attributes using Dictionary type. We have prepared sample based on your requirement. Please find the code snippet and sample for your reference.  

 

<h4>TextBox</h4> 

 

<EjsTextBox @ref="TextBoxObj"></EjsTextBox> 

 

<button class="e-btn" @onclick="Clicked">Add Attributes</button> 

 

@code 

{ 

 

EjsTextBox TextBoxObj; 

 

public void Clicked() 

{ 

    TextBoxObj.AddAttributes(new Dictionary<string, object>() { { "maxlength", "12" } }); 

} 

} 

 

 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/146663/ze/WebApplication11834358090  

 

We would like to inform you that we have provided HtmlAttributes. By default, the HtmlAttributes property is available in Textbox. You can add the custom attribute to the textbox input element by using this property. 

 

The following code example demonstrates how to set the custom attribute to the textbox component using HtmlAttributes property. 

 

<h4>TextBox</h4> 

 

<EjsTextBox HtmlAttributes="@htmlAttribute"></EjsTextBox> 

 

 

@code 

{ 

private Dictionary<string, object> htmlAttribute { get; set; } = new Dictionary<string, object>() { 

            {"maxlength", "12" } 

            }; 

} 

 

 

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_HtmlAttributes  

 

Regards, 

Gopi G. 

[milton]

Buen día, también funcionaria para agregar el atributo maxlength al control SfAutocomplete ??

[Sureshkumar P]

Hi Milton,

You can also use the maxlength in the autocomplete component also by using the htmlattributes property.

Find the code example here:

 

<SfAutoComplete TValue="string" TItem="Colors" HtmlAttributes="@htmlAttribute" Autofill=true PopupHeight="230px" Placeholder="Select a color" DataSource="@ColorsData">

    <AutoCompleteFieldSettings Value="Color"></AutoCompleteFieldSettings>

</SfAutoComplete>

@code {

    private Dictionary<string, object> htmlAttribute { get; set; } = new Dictionary<string, object>() {

            {"maxlength", "6" }

            };

    public class Colors

    {

        public string Code { get; set; }

        public string Color { get; set; }

    }

    private ObservableCollection<Colors> ColorsData = new ObservableCollection<Colors>()

    {

        new Colors() { Color = "Chocolate", Code = "#75523C" },

        new Colors() { Color = "CadetBlue", Code = "#3B8289" },

        new Colors() { Color = "DarkOrange", Code = "#FF843D" },

        new Colors() { Color = "DarkRed", Code = "#CA3832"},

        new Colors() { Color = "Fuchsia", Code = "#D44FA3" }

    };

}

 

Regards,

Sureshkumar P