Как сделать раздельный инпут?

Question

[alaskafx]

На многих сайтах я видел что-то вроде инпута, но раздельного, где каждое окошко подстроено под каждое число/букву..


Как такое реализуется?

Answer 1

[Василий Банников]

Можно тупо стилями. Посмотри на вот этот, например:
https://github.com/ugogo/react-input-verification-code
https://codesandbox.io/s/basic-6ejdp

Это не чистый html/css, но идею понять можно через devtools

Comments

[alaskafx]

Спасибо большое, теперь знаю в какую сторону идти, теперь придумать бы реализацию :ds

Answer 2

[mletov]

4 раздельных инпута

Comments

[alaskafx]

А если юзверь заполнил первый, то как его переключить на следующий?

[Василий Банников]

Это самый дерьмовый вариант. Можно сделать физически один инпут, просто его хитро застилизовать.
Ибо кроме названной проблемы с переключением окошек есть ещё проблема с копипастом и скринридерами, которые очень тяжело решаются с несколькими отдельными окошками.

Находил либу, которая как раз это хорошо решает, но не могу название вспомнить

[mletov]

alaskafx, имитировать нажатие tab. Или вызывать focus. При бэкспейсе - перекидывать на предыдущий.
Можно дежать полное значение текста в hidden

[mletov]

Василий Банников, возможно, но ...

Взять из буфера значение, разбить его посимвольно и запихнуть по символу в инпут - невелика сложность.

Находил либу, которая как раз это хорошо решает, но не могу название вспомнить

Не удивлюсь, что под капотом эти либы... создают 4 инпута)

[Василий Банников]

mletov, не, там как раз как фича только 1 инпут была, и этим противопоставлялась другим либам.
Это ещё даёт прикольное преимущество - клавиатура на айфоне сама предлагает вставить код из смс в такой инпут.

[mletov]

Василий Банников, тогда интересно было бы взглянуть на реализацию.

alaskafx, Пока что нагуглил
https://codepen.io/Diedrow/pen/NWqoKRr

[alekssamos]

У Apple как раз при входе раздельные инпуты. Менять естественно через фокус.