Работа с международными телефонными форматами в Cleave.js строится
вокруг идеи адаптивной маски ввода, которая подстраивается под
региональные правила набора номера, структуру длины и форматирование,
характерное для конкретных стран. В отличие от статических масок, где
структура фиксирована (например, (999) 999-9999),
международные номера требуют гибкости: различная длина национальных
номеров, наличие или отсутствие кода страны, разные правила группировки
цифр и вариативные префиксы.
В Cleave.js телефонная логика основана на нескольких ключевых режимах:
phone — активирует телефонное форматированиеphoneRegionCode — задаёт регион по умолчаниюБазовая идея заключается в том, что библиотека не просто вставляет символы, а анализирует ввод и перераспределяет цифры по логическим блокам.
Простейшая инициализация:
new Cleave(inputElement, {
phone: true,
phoneRegionCode: 'RU'
});Здесь ввод автоматически адаптируется под формат телефонных номеров России.
Ключевая особенность международных номеров — зависимость структуры от
региона. Cleave.js использует параметр phoneRegionCode для
определения правил форматирования.
Примеры регионов:
US — США и Канада (план NANP)GB — ВеликобританияFR — ФранцияDE — ГерманияRU — РоссияРазные регионы влияют на:
Пример для США:
new Cleave(inputElement, {
phone: true,
phoneRegionCode: 'US'
});Формат автоматически преобразуется к виду:
(415) 555-2671Для поддержки глобального ввода используется концепция международного
префикса +. Cleave.js может автоматически обрабатывать
символ + и перераспределять ввод в соответствии с
международной структурой.
Поведение:
+ фиксирует начало международного номераПример:
new Cleave(inputElement, {
phone: true,
phoneRegionCode: 'GB',
prefix: '+',
noImmediatePrefix: false
});При вводе:
+447911123456результат форматирования:
+44 7911 123456Важной особенностью является возможность динамической смены региона. Это используется в интерфейсах, где пользователь может выбрать страну перед вводом номера.
Логика работы:
Пример смены региона:
const cleave = new Cleave(inputElement, {
phone: true,
phoneRegionCode: 'US'
});
// позже
cleave.destroy();
new Cleave(inputElement, {
phone: true,
phoneRegionCode: 'DE'
});При такой модели важно учитывать, что структура номера полностью перестраивается, и старый ввод может быть переинтерпретирован.
Международные номера редко вводятся полностью сразу. Cleave.js обрабатывает промежуточные состояния ввода:
Механизм обработки основан на:
Например:
Ввод:
+1 2125Может интерпретироваться как:
+1 212 5с дальнейшей достройкой до корректного формата.
Cleave.js использует блочную модель форматирования. Каждая страна имеет собственную схему:
3-3-44-3-3 или
5-62-2-2-2-2Эта логика встроена в пресеты библиотеки и не требует ручной настройки.
Пример конфигурации блоков:
new Cleave(inputElement, {
phone: true,
phoneRegionCode: 'FR'
});Международные номера часто включают локальные особенности:
Cleave.js частично учитывает эти различия через региональные пресеты, однако не реализует полноценную валидацию операторов связи.
Дополнительные параметры позволяют управлять тем, как отображается международный префикс:
prefix — строка, добавляемая в началоnoImmediatePrefix — контроль появления префиксаdelimiters — управление разделителямиПример:
new Cleave(inputElement, {
phone: true,
phoneRegionCode: 'RU',
prefix: '+7',
noImmediatePrefix: true
});Поведение:
Особое внимание уделяется вставке номеров из буфера обмена. Международные номера часто копируются из:
При вставке Cleave.js выполняет:
+ и кода страныПример вставки:
+49 (151) 234-5678Результат:
+49 151 234 5678Несмотря на гибкость, существуют системные ограничения:
Для строгой валидации обычно требуется интеграция с внешними библиотеками, но Cleave.js остаётся инструментом именно форматирования, а не проверки корректности.
Удаление символов в международных номерах требует перерасчёта всей структуры:
Пример:
Исходное значение:
+44 7911 123456Удаление 4 из кода страны:
+4 4791 112 3456Дальнейшая переработка может изменить структуру полностью в зависимости от региона.
На практике международный ввод почти всегда сочетается с UI-компонентом выбора страны. В такой архитектуре:
phoneRegionCodeПример связки:
countrySelect.addEventListener('change', (e) => {
const region = e.target.value;
cleave.destroy();
cleave = new Cleave(phoneInput, {
phone: true,
phoneRegionCode: region
});
});Международное форматирование особенно важно в системах:
В таких системах ключевыми становятся:
При вводе символов, не относящихся к числам:
Например:
+7 (9a8) 123--45b-67преобразуется в:
+7 981 234 567Одной из сложных задач является сохранение позиции курсора при динамическом изменении строки. Cleave.js использует внутренний механизм:
Это особенно важно при работе с длинными международными номерами, где количество преобразований значительно выше, чем в локальных форматах.