How to navigate multiple inputs as if they were a single input field?

I have 5 input fields in a phoenix template which all have a max length of 1.
Essentially, I would like these 5 input fields to behave as if they were one.

Here is a JS example of what I am trying to achieve: Edit fiddle - JSFiddle - Code Playground

But there are 2 problems with the example above:

  • Backspace does not return to the previous input
  • The switch to the next input is not instant, making the feature faulty when the user is typing fast

Considering those, how would I achieve this in Elixir/Phoenix?

Note: I am not currently using LiveView, but if that would help with the solution then I would like to implement it.

Do you absolutely need 5 the controls? What if you split a single control into 5 characters? You may have less issues or edge cases in getting the behavior you’re looking for that way.

Look for some example for otp input field in html. you will find examples - choose and adapt the one which suits your existing libraries.

This has more to do with javascript, html and css. I don’t think you have to switch to liveview for it.

1 Like