Маска телефона для украинских номеров

Dev2u Маска телефона для украинских номеров — маска украинских телефонных номеров для Shop-Script и Webasyst CRM. Плагин приводит номера к единому формату +38 (0XX) XXX-XX-XX на витрине, в Checkout 2, личном кабинете, backend Shop-Script и CRM.

Один формат телефона во всём магазине

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

80501234567

380501234567

Результат приводится к единому виду:

Где работает маска

Checkout 2;

регистрация покупателя;

авторизация;

личный кабинет;

редактирование контактных данных;

динамически создаваемые формы;

backend Shop-Script при редактировании заказа;

Webasyst CRM при редактировании контакта;

дополнительные телефонные поля сторонних форм и плагинов.

Интеграция с Checkout 2

Dev2u Маска телефона для украинских номеров учитывает динамическую работу современного checkout Shop-Script. Маска продолжает работать после AJAX-перерисовки формы, изменения способа доставки и оплаты.

Стандартная международная подсказка Webasyst вида +X 111 222-33-44 заменяется на понятный украинский формат:

+38 (0__) ___-__-__

Введённый номер сохраняется при переключении доставки и оплаты и передаётся в заказ в отформатированном виде.

Поддержка поля «Email или телефон»

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

Например, корректно работают оба варианта:

user@example.com

Буквенный ввод не блокируется, поэтому поле не превращается принудительно в обычное телефонное поле.

Корректное редактирование номера

Маска рассчитана не только на последовательный набор цифр. Поддерживаются:

Backspace и Delete;

редактирование цифр в середине номера;

замена выделенного фрагмента;

Ctrl+A и ввод нового номера;

вставка номера из буфера обмена;

частично введённые номера;

повторный ввод после удаления части номера;

корректное положение курсора внутри форматированного значения.

Автозаполнение браузера

Плагин не отключает стандартное browser autofill. Для телефонных полей используются корректные атрибуты inputmode="tel" и autocomplete="tel" .

Автозаполнение проверено в Chrome и Firefox. Подставленный браузером номер также автоматически приводится к единому формату.

Backend Shop-Script

Маску можно отдельно включить для административной части Shop-Script. При редактировании заказа менеджер получает такой же формат телефона, как покупатель на витрине.

Frontend и backend работают независимо и включаются отдельными настройками.

Поддержка Webasyst CRM

Для CRM предусмотрен отдельный переключатель. Плагин работает с телефонными полями динамического интерфейса CRM:

форматирует уже сохранённый номер при открытии редактирования контакта;

форматирует номер непосредственно во время ввода;

работает с несколькими телефонными номерами контакта;

корректно синхронизирует форматированное значение с интерфейсом CRM;

поддерживает динамически открываемые окна редактирования.

CRM-интеграцию можно полностью отключить, не затрагивая Shop-Script.

Дополнительные поля и исключения

В настройках можно указать собственные CSS-селекторы:

Дополнительные телефонные поля — всегда обрабатывать как телефон;

Поля Email / телефон — комбинированный режим;

Исключить CSS-селекторы — поля, которые плагин не должен изменять.

Это позволяет подключать маску к callback, one-click и другим сторонним формам без изменения файлов плагина.

Интеграция для разработчиков

Режим поля можно явно указать через data-атрибуты:

data-dev2uphonemask="phone" — телефонное поле;

data-dev2uphonemask="mixed" — Email или телефон;

data-dev2uphonemask="ignore" — исключить поле из обработки.

Проверка конфликтующих плагинов

Одновременная работа нескольких масок телефона может приводить к двойному форматированию, неправильной позиции курсора и конфликтам JavaScript.

Dev2u Маска телефона для украинских номеров проверяет наличие активных известных плагинов, которые также работают с телефонными полями, и предупреждает администратора о возможном конфликте.

Плагин ничего не отключает автоматически — решение всегда остаётся за администратором сайта.

Без жёсткой проверки операторов

Плагин отвечает за формат украинского номера, а не за принадлежность номера определённому мобильному оператору. Поэтому не используется устаревающий список кодов операторов.

Это позволяет корректно работать не только с мобильными, но и с другими подходящими украинскими телефонными диапазонами.

Иностранные номера не повреждаются

Если пользователь вводит номер с явно другим международным кодом, плагин не пытается принудительно преобразовать его в +38 .

При этом Dev2u Маска телефона для украинских номеров остаётся специализированным плагином для Украины: в нём нет выбора страны, флагов и тяжёлой международной базы телефонных форматов.

Лёгкий frontend без сторонних библиотек

чистый JavaScript;

без jQuery;

без jquery.maskedinput;

без Inputmask;

без Cleave и IMask;

без frontend CSS-файлов;

без списка стран и флагов;

без cookies для определения страны.

Основные динамические формы обрабатываются через нативные события браузера. Специальная обработка CRM ограничена интерфейсом CRM и не запускает постоянное полное сканирование DOM витрины.

Плагин не заменяет системную валидацию

Dev2u Маска телефона для украинских номеров отвечает за ввод, нормализацию и форматирование номера. Проверка обязательности поля, сообщения об ошибках и остальные правила формы остаются за Shop-Script и Webasyst.

Плагин не добавляет собственные alert-окна, красные рамки и другие элементы, которые могут конфликтовать с дизайном темы.

Минимальные настройки

включение и выключение плагина;

подсказка формата номера;

дополнительные телефонные CSS-селекторы;

CSS-селекторы полей Email / телефон;

CSS-селекторы исключений;

маска в backend Shop-Script;

маска в CRM;

Локализация

Интерфейс настроек доступен на русском, украинском и английском языках.

Dev2u Маска телефона для украинских номеров — одна лёгкая украинская маска телефона для всех основных этапов работы с клиентом: от первого ввода номера покупателем до обработки заказа и контакта менеджером.