Open up the Numeric keyboard

[Harold]

Can you please show me how to open up the Numeric keyboard with SFNumericTextBox

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Harold, 

Thanks for contacting Syncfusion support. 

We have checked your requirement of displaying numeric keyboard. To achieve your requirement, we suggest you to use type as tel with the help of HtmlAttributes.


 

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

 

@code { 

    public Dictionary<string, object> attr = new Dictionary<string, object>() { 

          { "type", "tel" } 

    }; 

} 

 

Please find the sample below for your reference.

 

Sample Link       : https://www.syncfusion.com/downloads/support/directtrac/158529/ze/Numeric_Number_Keyboard1227198848 

 

Regards, 

Jeyanth. 

[Eimantas Baigys]

any chance this can go to component by default? 

[Berly Christopher]

Hi Eimantas Baigys, 

  

We will check and update the details in two business days (16^th December 2021). We appreciate your patience until then. 

  

Regards, 

Berly B.C 

[Berly Christopher]

Hi Eimantas Baigys, 

  

Due to the component structure and separator/ culture configuration, we could not implement the type as direct property in the source level. So, we suggest you to define the type with help of HtmlAttributes property as mentioned in the last update. 

  

Regards, 

Berly B.C 

[Ivan Temelkov]

Hi,

any chance this gets in the documentation?

It's very inconvenient that the numeric keyboard is not the default for the Syncfusion's Numeric Keyboard (!?) but it is also frustrating that one should browse the forums to find out how to enable this.

Best regards,

Ivan

[UdhayaKumar Duraisamy]

In the Syncfusion Numeric TextBox component, you can directly use type= “number” to open the Numeric keyboard while focusing on the component.

<SfNumericTextBox TValue="int?" type="number"></SfNumericTextBox>

Reference :

Also, we will add the above details to our documentation and refresh it in any one of our upcoming releases.

[Julien Barach]

Hi,

The issue with this solution is that it displays the native browser arrows when the input has the focus :

https://blazorplayground.syncfusion.com/BjLfNgshyKWRXKLk

[Kokila Poovendran]

Hi Harold,

Greetings from Syncfusion Support!

Thank you for bringing this issue to our attention.

To resolve the concern regarding the display of native browser arrows when focusing on the component, we recommend utilizing the "HTMLAttributes" property to configure the appropriate numeric keyboard option. This approach ensures compatibility and consistent behavior across devices.

Below is a code snippet demonstrating this solution:

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

@code { 

    public Dictionary<string, object> attr = new Dictionary<string, object>() { 

          { "type", "tel" } 

    }; 

} 

You can access the sample illustrating this approach here:  https://blazorplayground.syncfusion.com/VDhzNKLsMlCZHCEg

By focusing on the component with this setup, you'll notice that the native arrow keys are not displayed on desktop devices, addressing the concern you raised.

For further details, you can refer to our API Reference here: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_HtmlAttributes

Should you have any additional questions or require further assistance, feel free to reach out.