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.

https://www.google.com/search?q=otp+input+field+html

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