Android Question Boxed input controls in b4A (for inputting 6 digit OTP etc.)

PaulMeuris said:

Here's a little testproject ...
View attachment 143237
6 EditText views, 6 transparent panels with a border behind the EditText views.
Maximum length of the input set to 1 digit.
Input from left to right: type the digit and tap the "ready" or "enter" ("Ger.") button on the keyboard.
Tapping on the OK button shows the digits in the blue label.
And that's it.
Happy coding!
P.S.: maybe somebody made a custom view like this?

Click to expand...

beelze69 said:

Any help will be very useful.

Click to expand...

PaulMeuris said:

In the attached file you can find the second version of my testproject.
I use the suggestion from @Andrew (Digitwell) and added the textchanged subroutines.
If you tap on the clear button of the keyboard View attachment 143412 you can go back to the previous EditText box.
For this to work i added some code i found here: B4XPages intercepting keypress event.
Look at the Main module under #Region Delegates, Sub Activity_KeyPress (KeyCode As Int) As Boolean.
In the B4XMainPage module i added: private Sub B4XPage_KeyPress(KeyCode As Int).
When the user enters the last digit the OK button gets the focus. Here (btnok_Click subroutine) you can write code to go to the next page.
In my testproject the focus is returned to the first EditText box when the user taps on the OK button.
There are alternative ways of entering 6 digits. You could show 10 digit buttons like you see in bank apps.

Click to expand...

Mahares said:

If you have not done so, I recommend you take a look at the MaskedEditText in this link:

[Lib] Masked EditText

This EditText fixes a few issues with the standard EditText and adds new features: - Filter: you can transform any input before the text is changed; - Mask: you can define an input mask; - Read-only: you can protect your EditText against changes; - Floating hint: the hint moves above the...

www.b4x.com

You can use the customview designer to select just about all your properties, or program it by code. If you create the custom view via designer, you can achieve what you want in less than a handful of lines of code.
But if it is a requirement that you use 6 separate edittext boxes, each digit within a square box of its own, then you can stick with what you already have. If you choose the approach you are taking now, you can reduce the amount of code you need by over 80% if you use an array of 6 edittext and take advantage of the Sender keyword instead of repeating code for 6 separate edittext. Should you need help, come back.

Click to expand...

Andrew (Digitwell) said:

You should use the textchanged event and then if there is 1 char in the field move on, or if they are deleting a character you can move back.
I'm not on my main computer so can't write up an example.
From memory

B4X:

Private Sub edt3_textchanged(old as string,new as string)
    if (new.length = 0 and old.length = 1) then ' assuming you are using the code to restrict the length of the fields to 1 character'
    edt2.RequestFocus
    edt3.Enabled = False
    edt2.Enabled = True
    else if (new.length =1) then
    edt4.RequestFocus
    edt3.Enabled = False
    edt4.Enabled = True
    edt4.text = ""
   
End Sub

repeat for other editfields. The first and last edit fields are special cases.

Click to expand...