How to partition input field to appear as separate input fields on screen?

Question

Look at the image:

I want design something like in the image, where a 4 digit one time password (OTP) is to be entered by user. Right now I have achieved th

Answer 1

I would just keep this 4 separate fields approach, and add the same event handler to all of them, which will:

1. Check whether the input is valid (in the character class, you're willing to accept)
2. Check which field you are at, and then move the focus to the next field, or the ok button.

You can even write a little separate JS for that, and re-use it.