Limit to 5 digits in textbox

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?


3 Replies

PM Ponmani Murugaiyan Syncfusion Team January 21, 2022 03:05 AM UTC

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. 

@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. 


Regards, 
Ponmani M 



CH CharlesG July 27, 2023 12:55 AM UTC

Hi, thanks for this SyncFusion.

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



KP Kokila Poovendran Syncfusion Team July 27, 2023 01:19 PM UTC

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


Loader.
Up arrow icon