Какую маску можно использовать для гибкой маски?

Question

[blogersha097]

какую макску можно использовать
если есть инпут

в него можно было вводить максимум 13 цифр
но плюс ставился автоматически первым символом в инпут ( тоесть с плюсом будет 14 символов всего)

но нужно учесть что можно вводить не обязательно 13 символов, можно и меньше ( но не меньше 5 допустим)

( в этом главная проблема, все маски требуют ввода максимального количества символов)

Comments

[Сергей Соколов]

Пока что вопрос совсем расплывчатый.

распишите все возможные сценарии использования инпута,
с учетом того, что юзер может вводить по одной цифре, а может сделать copy-paste или его браузер предложит ранее введенный номер целиком.
В какой момент ввода по 1 цифре какое решение можно принять?
Как не сбить с толку бабушку, которая будет вводить номер «и тут всё изменилось!»

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

[blogersha097]

Сергей Соколов, суть такая - кликая в инпут - ставится плюс первым символом
дальше могу вводить еще 13 символов, а могу и меньше

[Сергей Соколов]

blogersha097, что, если плюс рисовать вне инпута, слева, статично. Позволять вводить только цифры.
Потом уже автоматом приклеивать плюс, если там на выходе требуется именно так.

[blogersha097]

Сергей Соколов, как вариант через псевдо можно? понятно что не инпуту
а врапперу инпута

[Сергей Соколов]

blogersha097, я б посмотрел пару красивых библиотек компонентов, как они это решают.
Например, в Bootstrap, в Material UI

Answer 1

[Сергей delphinpro]

https://developer.mozilla.org/en-US/docs/Web/HTML/...

pattern="\+\d{5,13}"

Comments

[blogersha097]

Сергей delphinpro , так вроде ж не будет работать
< input pattern="\+\d{5,13}"/>