How can i restrict the character length of a Numeric Text box to 1 Character

[Sribatsha_Kundu]

Hello,

I am fairly new to Mobile App Creation and trying to learn the tricks using Kodular.
I am trying to create a component where user can type OTP in 4 separate text boxes, each box should have the character strength as 1. The moment user inserts a number in the textbox, cursor should move to the next textbox.

Can someone please help me how it can be done, i tried using “length” block, however i am unsure how to do it, probably i don’t know it yet.

Regards,
Sribatsha

[bestprintsf (Leandro Z)]

Hi, @Sribatsha_Kundu welcome to the community !!!
You can use On Text Changed option with condition Text Length to control text lengh
https://docs.kodular.io/components/user-interface/text-box/#on-text-changed
and
https://docs.kodular.io/components/user-interface/text-box/#text-length
If lenght = x do you need to do !!

[Sribatsha_Kundu]

Hi,

Thanks for the help, yes, that was my first try, however it doesn’t restrict the character length of the Textbox, user will be able to insert multiple characters, upon edit of one character, the cursor moves to the next textbox.

[bestprintsf (Leandro Z)]

No you need to use math component to compane with length
Look this block

[WatermelonIce (Bryan)]

first, text length is already the length of text, you shouldn’t add length (the red one). Secondly, use segment text block.
If text length > 4, set textbox.text to: segment text=textbox.text, start = 1, length = 4. Then, call textbox cursor to end (the purple one)

[bodymindpower (Anke)]

[bestprintsf (Leandro Z)]

Hi @bodymindpower i hope you are fine !!!
Don’t need component text length into your block to make the comparison !!!

[bodymindpower (Anke)]

@bestprintsf

Don’t need component text length

Of course, that’s also possible:

[WatermelonIce (Bryan)]

@bodymindpower I think you should use equal or greater thanblock. That can also prevent users pasting text.

[Sribatsha_Kundu]

Hi Anke (bodymindpower), Leandro Z (bestprintsf) and TeenKoder (WatermelonIce),

Thanks for all the guidance and help. With your inputs, this block has now addressed my requirement.

Regards,
Sribatsha

[bestprintsf (Leandro Z)]

In you block when on text box length = 1 go to focus text box 3 ??
and you can`t writre any on text box 1 !!
the focus is the text box 3

[bestprintsf (Leandro Z)]

I am happy to help you. please mark the post that has helped you in the solution.

[bodymindpower (Anke)]

@bestprintsf

In you block when on text box length = 1 go to focus text box 3 ??
and you can`t writre any on text box 1 !!

Unclear, what do you mean?

[bestprintsf (Leandro Z)]

It is difficult for me to explain it in english !!!
if i’m insert 2 characters into textbox1, clear textbox1 how to know if the characters i’m enter are correct ? and go to focus textbox2. I hope you understand what I mean

[bodymindpower (Anke)]

@bestprintsf

if i’m insert 2 characters into textbox1, clear textbox1

After 1 character has been entered, the cursor jumps to the next TextBox. Therefore the user knows that this value was correct. If another character is added to this later, the TextBox is emptied, which means that the user recognizes that this is not permitted. So what’s the problem?
But you can also explain it with a notifier:

[bestprintsf (Leandro Z)]

I understand your point. But I ask if the entered textbox is correct or not. I can type anything in the textbox, but I do need to type a number or word. This is not programmed in the blocks ??. Thank so much your answers

[bodymindpower (Anke)]

@bestprintsf

This is not programmed in the blocks ?

But in the Designer, look at the topic: “Numeric TextBox”.