Как это сделать (phone, input)?

Question

[Romua1d]

Ребята прикрепил скрин. Кто-то видел такую реализацию? Дизайнер не в духе был чтоли?

Comments

[Руслан Полин]

я бы предложил поделить это на 5 input. И менять фокус при заполнении input.

[iBird Rose]

Руслан: и как будто как раз тут даже решение есть)) Как вызвать фокус инпута по условию?

[Руслан Полин]

iBird Rose: а я хотел написать реализацию для этого примера.)) Ну, я не вижу других способов решить эту задачу в точности, как нарисовал дизайнер.)

[Сергей delphinpro]

Руслан: а в чем вы видите здесь проблему?
Я вижу обычный инпут с немного нестандартной маской ввода 8_-__999__-__999__-__00__-__00
Берем любой плагин маскированного ввода и делаем. Да, придется вырезать лишние пробелы при обработке номера, но куда же деваться.
Ах да, полоску внизу просто рисуем линейным градиентом на фоне.
На первый взгляд как-то так. Детально обдумывать мне сейчас лень.

[Руслан Полин]

Сергей: о маскировочных плагинах не подумал.) А так да, буду иметь ввиду, вдруг пригодится в будущем.)

Answer 1

[Valera]

codepen.io/Grifas/pen/oZNwJO

так?

Comments

[Romua1d]

Да! Спасибо

Answer 2

[MrGaunt]

Inpusmask: https://github.com/RobinHerbots/Inputmask