Limit to 5 digits in textbox

[Gene]

I want to create an input field where the user can only enter digits and it must be 5 digits.  I thought the SfMaskedTextbox is the right control to use.  It works except I want to eliminate the underscore that shows up at the bottom of the textbox.  First of all, is the SfMaskedTextbox the appropriate control or is there a better control?  Second, if SfMaskedTextbox is the appropriate control, how do I eliminate the underscore?

[Ponmani Murugaiyan]

Hi Gene, 

Query: I want to create an input field where the user can only enter digits and it must be 5 digits. 

We suggest you to use the Numeric TextBox control, it allows the user to enter only the number. You can limit the digits using the maxlength attribute through HtmlAttribute property. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Numeric_TextBox1714226574 

@using Syncfusion.Blazor.Inputs 

 

<SfNumericTextBox TValue="int?" HtmlAttributes="@htmlattribute"></SfNumericTextBox> 

 

@code{ 

 

    Dictionary<string, object> htmlattribute = new Dictionary<string, object>() 

    { 

           { "maxlength", "5" }, 

    }; 

} 

For more information about Numeric TextBox control, please refer the below link. 

Demo: https://blazor.syncfusion.com/demos/numeric-textbox/default-functionalities?theme=bootstrap5 

Documentation: https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started 

API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxModel-1.html#properties 

Regards, 

Ponmani M 

[CharlesG]

Hi, thanks for this SyncFusion.

It would be useful if the control had a property to support this?

[Kokila Poovendran]

Hi Gene,

Thanks for your update. In SfNumericTextBox component, we have provided support for handling default textbox attributes using the HtmlAttribute property. This will allow you to restrict the input to digits and enforce a 5-digit limit.

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxModel-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxModel_1_HtmlAttributes