Entering a verification code in a mobile application
Question
Application Type
Mobile

A lot of application nowadays that use a verification code, work smoothly where you can paste a code and the pasted code will be filled in in the screen. For instance with a design like below, when you select paste in the first box, the 5 digit code is automatically pasted in the 5 seperate boxes. Also, if you decide to enter the code manually, if you enter the first digit, the box should automatically go to the second one (I managed to get this to work with the onChange event) and if you delete a digit in for instance box 2, it should automatically go back to box 1 (I did not manage to get this to work)

Summarized, I struggle with a couple of things. Firstly I am struggeling getting the copied text from the clipboard. I tried some javascipt, but I didn't get that to work yet. 

Second, I want to be able to paste the code in such a way that if I select paste in the first box, it is automatically pasted in the 5 boxes. 

Thirdly, I want to be able to, if I am entering the digit in the 5th box and in this box I use the delete button on my keyboard, the focus was set on the fourth box again.

I am also wandering if there is any forge component for this, since many apps are using it nowadays I expect there to be such a component. 

Thanks in advance,

Kind regards,

Tyler

Hi Tyler,

Not sure if you have resolved this yet however we have implemented something very similar to behaviour you're describing above for an OTP entry scenario using JS only (js file attached). This JS is placed on the isReady action of your web block/page and can:

  1. Automatically focus on the next field after entering a number
  2. On backspace press, if a number already exists in the input then it deletes it and if the input is blank it'll automatically focus on the previous field
  3. When the code is complete, the submit client action is automatically fired 

The only missing piece is the automatic population of the fields when you paste the code, however, using the same splice() action and propagate value logic in the JS file it shouldn't be difficult to propagate the numbers of your pasted code to consequent input fields when pasting the code in the first field.

Hope this helps

Ossama


OTPOnReady.js

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