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

[beelze69]

Hi,

I would like to know if there are boxed input controls available under b4A..

For example for capturing the 6-digit OTP.

The end-user will input every digit in one box.

Thanks..

 

[John Naylor]

Simplest way would be to put an edittext control on a panel and change the panel borders or do you mean something a bit flasher?

Looks better with a label added too...

 

[PaulMeuris]

Here's a little testproject ...

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?

 

[beelze69]

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?

Hi Paul,

Thanks a lot for the code.
I just wanted one change in it.
The moment one digit is pressed, the cursor should set the focus to the next input control (without tapping the ready or enter key).
Any help will be very useful.

Thanks.

 

[Andrew (Digitwell)]

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

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.

 

[PaulMeuris]

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

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.

 

[Mahares]

Any help will be very useful.

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.

 

[beelze69]

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.

Hi Paul,

Thanks a lot for the code..
I will try it out ...

 

[beelze69]

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.

Hi Mahares,

Thanks for pointing out this link..
I will try it out and come back if I face any difficulty

 

[beelze69]

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

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.

Hi Andrew,
Thanks for the code snippet.