Работа с нестандартными форматами ввода в Cleave.js опирается на
комбинацию блоков (blocks), разделителей
(delimiter), кастомных числовых настроек
(numeral), а также программного управления значением через
API экземпляра. Библиотека изначально ориентирована на типовые сценарии
(карты, даты, телефоны), однако её архитектура позволяет расширять
поведение под форматы, которые выходят за рамки предустановленных
масок.
Для редких форматов, где длина сегментов не фиксирована или зависит
от контекста, применяется динамическая конфигурация
blocks.
new Cleave(input, {
delimiters: ['-', '-', '/'],
blocks: [3, 2, 5, 4],
});Такой подход позволяет описывать структуры вроде внутренних кодов, регистрационных номеров или составных идентификаторов, где каждая часть имеет собственную семантику.
При работе с неоднородными форматами важно учитывать, что
blocks интерпретируются строго последовательно, без
условных переходов. Любая вариативность должна быть реализована внешней
логикой до инициализации экземпляра.
Редкие форматы часто содержат необязательные части: региональный код, суффикс проверки, расширение записи.
Поскольку Cleave.js не поддерживает условные блоки напрямую, применяется стратегия предобработки:
const raw = value.replace(/[^a-zA-Z0-9]/g, '');
const config =
raw.length > 10
? [4, 4, 4, 4]
: [4, 4, 2];
new Cleave(input, {
blocks: config,
delimiter: '-'
});Такой подход переносит логику определения структуры на уровень приложения, оставляя Cleave.js задачу только форматирования.
В сценариях, где требуется форматирование чисел с нетипичными
разделителями или локальными правилами, используется
numeral и расширенные параметры
numeralDecimalMark, delimiter,
numeralThousandsGroupStyle.
new Cleave(input, {
numeral: true,
numeralThousandsGroupStyle: 'thousand',
numeralDecimalMark: ',',
delimiter: ' '
});Редкие форматы включают:
Для нестандартных группировок применяется кастомный
numeralThousandsGroupStyle, однако его возможностей
недостаточно для сложных правил (например, индийская система 12,34,567),
поэтому часто используется внешнее преобразование строки перед передачей
в Cleave.js.
Cleave.js не имеет встроенной поддержки индийского формата, поэтому применяется предобработка:
function formatIndianNumber(value) {
const x = value.replace(/\D/g, '');
return x.replace(/(\d)(?=(\d\d)+\d$)/g, '$1,');
}Далее значение передаётся в инстанс:
new Cleave(input, {
numeral: true,
delimiter: ','
});Важно, что Cleave.js в этом случае не выполняет группировку самостоятельно — он лишь отображает уже подготовленное значение.
IBAN и аналогичные банковские идентификаторы требуют строгого разбиения на блоки фиксированной длины:
new Cleave(input, {
blocks: [4, 4, 4, 4, 4, 4, 4],
uppercase: true
});Особенности таких форматов:
Для универсального IBAN используется более гибкая схема с динамическим увеличением блоков до 34–34 символов, однако Cleave.js ограничен статической конфигурацией, поэтому часто применяется усечение или адаптивная инициализация.
Нестандартные форматы могут включать:
Cleave.js не ограничивает ввод Unicode на уровне ядра, но
blocks и prefix могут некорректно
взаимодействовать с графемами, состоящими из нескольких code points.
Особое внимание требуется при:
Рекомендуется предварительная нормализация:
value.normalize('NFKC');Это уменьшает риск расхождения между визуальной длиной и фактической длиной строки.
Некоторые системы используют фиксированный префикс:
new Cleave(input, {
prefix: 'SKU-',
delimiter: '-',
blocks: [3, 3, 4]
});Особенность таких форматов — префикс не участвует в разбиении блоков,
но влияет на позиционирование курсора. В сложных случаях требуется
ручная корректировка поведения через onValueChanged.
Редкие форматы часто ломаются при вставке данных из внешних источников (Excel, PDF, CRM).
Типичные проблемы:
Решение строится на переопределении обработки:
new Cleave(input, {
blocks: [4, 4, 4],
delimiter: '-',
onValueChanged: function (e) {
const cleaned = e.target.value.replace(/[^\w-]/g, '');
}
});Cleave.js выполняет форматирование после очистки, но не гарантирует предварительное нормализующее поведение.
При работе с нестандартными масками важна корректная обработка промежуточных состояний:
Cleave.js не валидирует полноту структуры, поэтому такие состояния считаются допустимыми.
Для критичных форматов применяется внешняя проверка:
function isComplete(value) {
return value.replace(/\D/g, '').length === 12;
}В нестандартных сценариях структура может изменяться во время ввода.
const cleave = new Cleave(input, {
blocks: [3, 3, 3]
});
cleave.destroy();
new Cleave(input, {
blocks: [4, 4, 4, 4]
});Прямого API для горячего обновления blocks нет, поэтому
пересоздание экземпляра остаётся основным механизмом адаптации.
Сложные идентификаторы часто содержат комбинации типов данных:
new Cleave(input, {
delimiters: ['-', '-', '-'],
blocks: [4, 4, 4, 2]
});При смешанных форматах важно избегать конфликтов между
numeral и blocks, поскольку числовой режим
переопределяет обработку символов.
При расширении Cleave.js за пределы типовых форматов проявляются системные ограничения:
Эти ограничения компенсируются внешним слоем подготовки данных и нормализации входа.
В нестандартных форматах часто возникает проблема смещения курсора при вставке символов-разделителей.
Cleave.js автоматически корректирует позицию, но при сложных схемах возможны расхождения. В таких случаях используется контроль через события:
onValueChanged: function (e) {
const position = e.target.selectionStart;
}Сложные интерфейсы требуют синхронизации:
Редкие форматы чаще всего встречаются в:
Cleave.js в таких сценариях выступает как слой визуального форматирования, тогда как:
Такой подход позволяет использовать библиотеку вне её стандартного набора сценариев без потери управляемости структуры данных.