How to create  otp input field with multiple input boxes?
Application Type
Mobile

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 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.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.