How to configure the Numeric Textbox to use only the numeric keyboard

[Syncfusion Support]

Answer:

We can achieve using the HtmlAttributes property to enable a numeric keyboard.

@{

IDictionary<string, object> TypeAttribute = new Dictionary<string, object>();

TypeAttribute.Add("type", "tel");

}

<EjsNumericTextBox TValue="int?" HtmlAttributes="@TypeAttribute">EjsNumericTextBox>

[Mitch Kuijpers]

And how about when your culture needs to have a dot instead of a comma to input decimal values?

[Kokila Poovendran]

Hi Mitch Kuijpers,

We apologize for any inconvenience this issue may have caused you, After carefully reviewing your request, we have prepared a code snippet that aligns with your requirements. To enable the numeric keyboard at mobile mode, you can simply set the input mode as "numeric" using the following code snippet:

<SfNumericTextBox TValue="double?" Format="n2" HtmlAttributes=Htmlattributes Value=5 Min=1 Max=100 Step=0.01></SfNumericTextBox>

@code {

    private Dictionary<string, object> Htmlattributes => new()

    {

{ "inputmode", "numeric" },

    };

}

 

Sample :https://blazorplayground.syncfusion.com/embed/LNBANQrZKUBLVbQx?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

With the provided code snippet, the Numeric Textbox will now utilize the numeric keyboard as per your request.