Библиотека Cleave.js предоставляет механизм форматирования ввода, который изначально ориентирован на работу с отдельными типами данных: номера телефонов, числовые значения, даты, кредитные карты. Однако реальная прикладная разработка почти всегда требует работы с составными полями, где в одном значении сочетаются разные типы данных, правила форматирования и контексты обработки.
Комбинирование типов данных в Cleave.js реализуется через гибкую архитектуру масок, кастомных обработчиков и динамических стратегий форматирования. Основная идея заключается в том, что одно поле ввода может одновременно подчиняться нескольким правилам, переключаться между ними или применять их последовательно в зависимости от состояния значения.
Внутренне Cleave.js разделяет форматирование на несколько уровней:
Комбинирование типов данных происходит на уровне маски и логики трансформации. Основной механизм — это объединение конфигураций через:
blocksdelimiternumericOnlyprefixnoImmediatePrefixrawValueTrimPrefixprefixStrippedformatterКаждый из этих элементов может быть использован как часть композиции нескольких типов данных.
Наиболее прямой способ комбинирования типов данных — использование
blocks, где каждая часть строки получает собственное
правило.
Пример концепции:
Такой формат задаётся через блоки разной длины:
new Cleave('.input', {
blocks: [2, 4, 2, 2],
delimiter: '-'
});Хотя пример кажется числовым, та же модель применяется для смешанных данных:
Блоки не привязаны к типу данных. Это означает, что Cleave.js не различает «строку», «число» или «код» — он оперирует только сегментами символов.
Комбинирование букв и цифр требует использования кастомной логики,
поскольку стандартные настройки numericOnly ограничивают
тип данных.
Типичный подход:
Пример логики:
new Cleave('.input', {
delimiter: '',
blocks: [3, 3, 4],
uppercase: true
});Здесь происходит фактическое смешение:
Cleave.js не валидирует тип символов внутри блоков, поэтому комбинирование достигается структурированием, а не строгой типизацией.
Одной из ключевых возможностей при комбинировании типов данных является динамическое изменение конфигурации.
Пример сценария:
Это реализуется через переинициализацию экземпляра или обновление конфигурации:
cleave.setRawValue('');
cleave.properties.blocks = [4, 4, 4, 4];
cleave.properties.delimiter = ' ';Телефонные номера часто содержат комбинацию:
При этом возможны дополнительные элементы:
Конфигурация:
new Cleave('.phone', {
phone: true,
phoneRegionCode: 'RU'
});Однако при комбинировании с другими типами данных (например, внутренним идентификатором пользователя) используется ручная маска:
new Cleave('.input', {
blocks: [1, 3, 3, 4, 2],
delimiter: ' '
});Таким образом создаётся гибрид:
Финансовые данные часто комбинируются с дополнительными идентификаторами:
Cleave.js позволяет комбинировать такие структуры через:
numeral режимПример:
new Cleave('.finance', {
numeral: true,
numeralThousandsGroupStyle: 'thousand',
prefix: 'USD ',
rawValueTrimPrefix: true
});Для расширенного комбинирования:
new Cleave('.finance', {
blocks: [3, 3, 4, 2],
delimiter: ' | ',
numericOnly: false
});Здесь в одном поле совмещаются:
Дата сама по себе является комбинированным типом данных:
Но при расширении она может включать:
Пример гибридной структуры:
new Cleave('.date-id', {
blocks: [2, 2, 4, 3],
delimiter: '/'
});Интерпретация:
Такой подход часто используется в системах документооборота, где дата является частью ключа.
Наиболее мощный механизм комбинирования — formatter.
Он позволяет полностью переопределить логику обработки значения:
new Cleave('.input', {
formatter: function (value) {
const cleaned = value.replace(/[^a-z0-9]/gi, '');
const part1 = cleaned.slice(0, 2);
const part2 = cleaned.slice(2, 6);
const part3 = cleaned.slice(6, 10);
return [part1, part2, part3].filter(Boolean).join('-');
}
});Это превращает Cleave.js в универсальный слой форматирования поверх любых структур данных.
В реальных приложениях часто требуется объединение:
Пример:
Пример конфигурации:
new Cleave('.local', {
numeral: true,
prefix: 'KZ ',
numeralThousandsGroupStyle: 'thousand'
});Или структурный вариант:
new Cleave('.local', {
blocks: [2, 3, 3, 2],
delimiter: '-',
uppercase: true
});Несмотря на гибкость, модель Cleave.js имеет фундаментальные ограничения:
На практике это означает, что сложные комбинированные форматы требуют внешней логики согласования.
Применяются три основных подхода:
Разделение строки на логические блоки фиксированной длины
Формат зависит от контекста ввода
Использование formatter
При комбинировании настроек Cleave.js применяет приоритеты:
Это означает, что комбинирование всегда является не наложением, а выбором активного слоя логики.
Типичный универсальный гибрид:
new Cleave('.complex', {
blocks: [2, 4, 2, 2],
delimiter: '-',
uppercase: true,
numericOnly: false
});Такая структура фактически объединяет:
Комбинирование типов данных в Cleave.js выступает не как отдельная функция, а как фундаментальная модель:
Такой подход позволяет использовать библиотеку не только для косметического форматирования, но и для моделирования сложных пользовательских идентификаторов прямо на уровне ввода.