SFTextbox only allow numbers but allow CTRL V

[Enrique]

I am trying to create a textbox that has the following features

• Only input allowed are numbers. (I want this to be live and not validation message on Save).
• Maximum of 9 char. (no min)
• Still allows to copy/paste with CTRL + V

I been working with the SFTextbox and only allowed numbers via JavaScript, but that blocks the V key from being pressed on a copy and paste scenario.

I then tried the SFMaskedTextbox control with a mask of "000000000" but then I get the _ symbols for empty spaces. It works, but it is not ideal as the end user would assume all the spaces would need to be filled.

Is there a simpler way of doing this? Wanted to check if I missed something in the documentation.

[Priyanka Karthikeyan]

Hi Enrique,

We suggested SfNumericTextbox to achieve your requirement. Please find the code snippet and sample attached for your reference.

<SfNumericTextBox TValue="int?" HtmlAttributes="@CustomAttribute">

</SfNumericTextBox>

@code{

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

    {

        { "maxlength", "9" }

    };

}

 

 

Sample: https://blazorplayground.syncfusion.com/hNrgCtsdoqtMXoVp

For more information, Please refer the below demos and documentation:

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

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

If the information provided does not fully meet your requirements or if you have any specific issues you'd like to address, please share additional details with us. We are here to assist you further.

Regards,

Priyanka K

[Enrique]

Hi,

I tried using a numeric box, but the formatting of it removes any zeros. It turns “000910” to “910”.

The values I am using need to behave like numeric strings. Kind of like a phone number or an ID Number.

[Enrique]

Hi, any ideas regarding my reply above?

[Mallesh Ravi Chandran]

Hi Enrique,

To achieve your desired functionality, you can make use of the PromptChar property with the SfMaskTextBox component.

<SfMaskedTextBox Mask="000000000" PromptChar="@promptChar"></SfMaskedTextBox>

@code{

   public char promptChar = ' ';

}

Sample: https://blazorplayground.syncfusion.com/VNrgWjhQIBnhvouj

Documentation: https://blazor.syncfusion.com/documentation/input-mask/mask-configuration#prompt-character

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_PromptChar

Regards,

Mallesh