NumericTextBox integers only

1 Answer 592 Views
NumericTextBox
Andrei
Top achievements
Rank 1
Iron
Iron
Iron
Andrei asked on 28 Sep 2021, 12:26 PM | edited on 28 Sep 2021, 12:26 PM
Is it possible to restrict input inside NumericTextBox to only integer values?

1 Answer, 1 is accepted

Sort by
1
Accepted
Stefan
Telerik team
answered on 28 Sep 2021, 12:34 PM

Hello, Andrei,

This can be controlled with the format option.

For example, with format 'n0':

https://stackblitz.com/edit/react-e6x811?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Andrei
Top achievements
Rank 1
Iron
Iron
Iron
commented on 28 Sep 2021, 03:05 PM | edited

is it possible to get rid of . separator i need it to be plain digits, also how do i controll the amount of digits that can be entered and get rid of symbol sign?

desired input example: 131312321324343242

Stefan
Telerik team
commented on 29 Sep 2021, 06:16 AM

In that case, I can suggest trying this format:

format="#"
It will show only the numbers:

https://stackblitz.com/edit/react-e6x811-mrnc27?file=app/main.jsx
Andrei
Top achievements
Rank 1
Iron
Iron
Iron
commented on 29 Sep 2021, 08:44 AM

ty it looks way better now, but there is still an option to type - symbol into the text box is there any way to prevent it, maybe i should block it via keydown event or there is an option/prop to restric input to only positive numbers?
Stefan
Telerik team
commented on 29 Sep 2021, 08:48 AM

Could you please share which symbol can be typed and will be shown in the NumericTextBox. The component is browser culture-specific and this may be the reason.
Andrei
Top achievements
Rank 1
Iron
Iron
Iron
commented on 29 Sep 2021, 08:49 AM | edited

 minus symbol, also if your number starts with 0 it automatically removes it for example if my inpupt is: 0123 when field loses focus it becomes :123 is it possible to turn that off?
Stefan
Telerik team
commented on 29 Sep 2021, 08:56 AM

The minus symbol is expected as -10 is a valid integer value.

Also,  the value 010 is converted to an integer 10 as this is its valid equivalent.

Could you please share more details about the requirement and why -10 or changing 010 to 10 is not acceptable? This will help us better understand the use case for this and see if we can offer something that will better match it.

Andrei
Top achievements
Rank 1
Iron
Iron
Iron
commented on 29 Sep 2021, 09:03 AM

input field will be used to store passport ID which in our case has only numbers from 0-9
example: 20093234505452 or 00090236505452
Stefan
Telerik team
commented on 29 Sep 2021, 09:11 AM

Thank you for the confirmation.

In this case, I can suggest checking our MaskedTextBox as it has different option to restrict the user input:

https://www.telerik.com/kendo-react-ui/components/inputs/maskedtextbox/
Tags
NumericTextBox
Asked by
Andrei
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Stefan
Telerik team
Share this question
or