I need to take a 6 digit OTP input from the user. The input must consist of multiple boxes as shown in the image below.
- When we input a number in the box it should automatically focus on the next one.
- The backspace functionality must work too. When a digit is deleted it should focus on the previous box.
- I want only the number keypad to open in both ios and android. (The input type=number does not work with numbers starting with 0).
Please help me with how can I build such a solution with OutSystems?
*It is for Mobile Development.
Hi Shivam,
What you can do is working with JavaScript nodes. To add some listeners to all of the inputs you have.
In "OnReady" of the screen, you can add the following script:
document.getElementById($parameters.InputId2).addEventListener('keydown', function(event){
// if the keyCode is 8 ( backspace was pressed )
if (event.keyCode === 8 && document.getElementById($parameters.InputId2).value === '') {
document.getElementById($parameters.InputId1).focus();
return false;
}
}, false);
The previous snippet will listen to the second input change. When the backspace pressed inside it, the focus will move to the first input.
And we need to add another JS node when the first input changed (On Change event), so the focus will be moved to the second input after entering one character:
You need to apply the previous logic to all of the 6 inputs you have.
One more thing, you just need to validate if the input is number or not using a regular expression function, to make sure that the input is only numbers (0-9).
It worked. Added and modified multiple logics but the core structure helped a lot.
Thank you very much.
Hi @Hasan Derawan sir can you explain a bit more because i tried the solution but it doesn't work and yet confused a bit . if possible can you share the oml file for reference and clarity.
waiting for your response,
Thanks & regards,
Hi @Srinivas Prasad,
Unfortunately I no longer have the OML. It has been a while since this post was posted.
The idea is to use the JS node to control the "focus" attributes of the input fields. "OnChange" on each input, you need to add a JS node to move the focus to the next input field if the length of that changed input value equals 1, or to move the focus to the previous input if the length of the input value was 1 and becomes 0 (or you can listen for the "Backspace" key-down event).
I hope that will help you in implementing the behaviour. If you manage to do it, you can contribute to the Forge by creating this as a public component for others to use ;)
Regards,
Hasan
Hi, It is working but I have a small issues, when I take input variable as number data type, then while checking condition length(input)>0 in OnChange it is always true even though I have removed the number by backspace because the default value for integer type is ZERO, length function will always return 1.
So, In case, I have taken that variable as text, my issue is resolved, but while entering OTP alphabetic keypad is coming instead of number keypad (I know its because I have given variable type as text).
Could anyone suggest solution for this please
thanks in advance
Hello Shivam
This one is not Exact but you can try to reference:
https://www.outsystems.com/forge/component-overview/1989/pin-code
https://www.outsystems.com/forge/component-overview/3730/pin-code-mask
You can also paste it automatically from SMS using Google SMS Retriever on Android 10, 11 (not 12) and one
"one-time-code" autocomplete property in IOS