Конфигурация Cleave.js строится вокруг единого объекта настроек, который передаётся при инициализации экземпляра. Поведение форматирования определяется набором независимых, но комбинируемых параметров:
Каждая группа опций активирует определённый слой логики, и в ряде случаев одни параметры исключают или переопределяют другие.
Режим чисел активируется опцией numeral: true и включает
расширенный набор параметров:
Включает числовую обработку ввода с автоматическим форматированием.
Определяет символ десятичного разделителя.
. или , в зависимости от локалиОграничивает количество знаков после запятой.
2 → максимум 0.00Ограничивает количество цифр в целой части числа.
Определяет стиль группировки разрядов:
thousand — классическая группировка 1 000 000lakh — индийская система 10,00,000wan — китайская система 1000-разрядной группировкиОграничивает ввод только положительными значениями.
Удаляет ведущие нули:
000123 → 123Добавляет фиксированный префикс к значению.
$, €)Определяет расположение знака перед префиксом.
-€100 vs €-100Перемещает префикс в конец строки.
Запрещает автоматическое отображение префикса при пустом вводе.
Удаляет префикс из «сырых» данных (getRawValue()).
Механизм масок в Cleave.js основан на разбиении строки на фиксированные сегменты.
Определяет длину каждого сегмента:
blocks: [4, 4, 4, 4]Пример: банковская карта 1234567812345678 →
1234 5678 1234 5678
Определяет символы-разделители между блоками:
delimiters: [' ', ' ', ' ']Количество разделителей обычно на 1 меньше количества блоков.
Автоматически переводит ввод в верхний регистр.
Принудительно приводит к нижнему регистру.
Важно: uppercase и lowercase не
комбинируются одновременно — последний применённый параметр имеет
приоритет.
Режим активируется через phone: true.
Определяет региональную маску:
USRUGBФорматирование подстраивается под стандарты номера страны.
89991234567RU+7 (999) 123-45-67Телефонный режим переопределяет blocks и
delimiters, если они заданы вручную.
Активирует режим форматирования даты.
Задаёт порядок компонентов даты:
datePattern: ['d', 'm', 'Y']Варианты компонентов:
d — деньm — месяцY — годОграничивают допустимый диапазон дат.
dateMin: '2000-01-01'dateMax: '2099-12-31'Формат сравнения зависит от внутреннего парсинга библиотеки.
Активирует режим форматирования времени.
Определяет структуру времени:
timePattern: ['h', 'm', 's']или укороченный вариант:
timePattern: ['h', 'm']Формат отображения:
24 — 24-часовой формат12 — 12-часовой формат с AM/PM логикойВключает специализированное форматирование банковских карт.
Автоматически определяет тип карты по BIN-диапазону.
Ограничивает ввод только валидными паттернами известных карт.
Колбэк изменения типа карты:
onCreditCardTypeChanged: function(type) {}Типы могут включать:
Переводит весь ввод в верхний регистр.
Переводит весь ввод в нижний регистр.
Поведение применяется на уровне каждого символа во время ввода, а не после завершения.
Отложенное отображение разделителей до заполнения блока.
Меняет местами отображаемое и скрытое значение при работе с hidden input.
Удаляет префикс из сырого значения.
Удаляет ведущие нули во всех числовых режимах.
Пример:
00045 → 45Особенно важно для:
Основной обработчик изменения значения:
onValueChanged: function(e) {
e.target.value
e.target.rawValue
}Позволяет отслеживать:
Используется для синхронизации с состоянием приложения.
Поведение Cleave.js определяется приоритетами:
phone, date,
time, creditCard)numeral)blocks, delimiters)uppercase,
lowercase)stripLeadingZeroes,
rawValueTrimPrefix)При конфликте параметров специализированные режимы всегда имеют приоритет над универсальными настройками.
Некоторые параметры не предназначены для совместного использования:
phone конфликтует с blocks и
delimitersdate переопределяет ручные маскиcreditCard игнорирует пользовательские блокиnumeral отключает произвольные маски символовЛогика построена таким образом, чтобы один активный режим полностью контролировал форматирование, снижая вероятность неконсистентного ввода.