Маска телефона Телефона - Inputmask любой страны

Что такое Inputmask для телефонов и зачем он нужен

Inputmask для телефонов — плагин для Shop-Script на Webasyst: на витрине подключает библиотеку Inputmask и накладывает мягкую международную маску на поля ввода телефона. Удобно для корзины, оформления заказа и любых других форм, где посетитель вводит номер в международном виде.

Как подключается к теме — плагин выводит скрипты через стандартный хук витрины frontend_head . Если тема не выводит этот хук, предусмотрены запасные варианты: frontend_footer и frontend_page , чтобы маска всё равно попала на страницу.

Что умеет плагин

Находить поля телефона по настраиваемым CSS-селекторам (по умолчанию — тип tel , имена, id, классы и placeholder со словами про телефон на русском и английском).

Исключать отдельные поля по списку селекторов-исключений (скрытые поля, пароль, email, класс .js-inputmask-ignore , атрибут data-inputmask-ignore="1" и другое — всё настраивается).

При необходимости подставлять «+» при фокусе в пустое поле и убирать одинокий «+» при уходе с поля — удобно для международного формата.

Нормализовать ввод и вставку из буфера: оставляет цифры и ведущий плюс, опционально добавляет «+» перед цифрами.

Пробовать телефонный каталог Inputmask (alias): сначала abstractphone , затем phone ; если каталог недоступен — перейти на запасную маску вида «+» и до пятнадцати цифр.

Ставить у полей autocomplete="tel" и inputmode="tel" ; при типе number пытаться переключить на tel для корректной клавиатуры на телефонах.

Подхватывать поля, появляющиеся в DOM позже: MutationObserver и при наличии jQuery — повторная инициализация после AJAX.

Вести отладочные сообщения в консоль браузера с префиксом [shop-inputmask] , если включён режим отладки.

Что вы получаете

Более предсказуемый ввод телефона на витрине без правки шаблонов темы в каждом месте.

Гибкость: свои селекторы под нестандартные формы и отдельный список исключений.

Один раз настроили в админке — маска работает на подходящих полях автоматически.

Где настраивать — Магазин → Настройки → Плагины → Inputmask для телефонов (или аналогичный раздел плагинов Shop-Script в вашей установке): включение плагина, селекторы, исключения, плюс при фокусе, символ placeholder, использование телефонного каталога Inputmask, отладка.

Основные сценарии использования

Оформление заказа и корзина

Посетитель вводит номер в едином формате, меньше «ломаных» номеров из-за произвольных символов.

Маска не жёстко привязана к одной стране: сначала используется возможность библиотеки по телефонным alias, иначе — мягкая международная запасная маска.

Нестандартные поля в теме

Если поле телефона называется иначе, чем в дефолтных селекторах, добавьте свой CSS-селектор в настройках плагина.

Если маска попала на лишнее поле, добавьте для него исключение в блоке «Исключения» или пометьте поле классом js-inputmask-ignore / атрибутом data-inputmask-ignore="1" .

Динамические формы и AJAX

Новые блоки формы, попавшие на страницу после загрузки, обрабатываются наблюдателем за DOM.

При использовании jQuery дополнительно выполняется переинициализация после завершения AJAX-запросов.

Технические детали (кратко)

На страницу выводятся минифицированные скрипты Inputmask, расширения для телефонов и файл с телефонными кодами, затем собственный скрипт плагина.

Конфигурация с админки передаётся в JavaScript через объект window.shopInputmaskPluginConfig .

Повторного подключения ассетов за один запрос страницы не происходит: плагин отслеживает, что скрипты уже вставлены.

Что можно настроить

Включение или выключение плагина целиком.

Строка CSS-селекторов полей телефона (несколько селекторов через запятую в формате, допустимом для querySelectorAll ).

Селекторы исключений.

Автоподстановка «+» при фокусе.

Символ placeholder маски.

Включение или отключение попытки использовать телефонный каталог Inputmask (alias).

Режим отладки в консоли браузера.

Частые вопросы

Нужен ли jQuery? Нет. Плагин работает и без него; jQuery только помогает переинициализировать поля после некоторых AJAX-сценариев.

Почему маска «мягкая»? Потому что при недоступности телефонного каталога используется запасной шаблон «+» и набор цифр, без жёсткой привязки к одному национальному формату.

Можно ли отключить маску на витрине? Да, снимите галочку «Плагин включен» в настройках.

Куда смотреть, если что-то не срабатывает? Включите «Режим отладки» и откройте консоль разработчика в браузере; также проверьте, что тема выводит один из хуков frontend_head , frontend_footer или frontend_page .

Нужна помощь с настройкой под ваш магазин? Пишите на scc.lac@mail.ru или в Telegram @web_stu .