Параметр blocks и его применение

В Cleave.js параметр blocks используется для задания фиксированной структуры группировки вводимых символов. Он определяет, как строка разбивается на логические части, каждая из которых имеет заранее заданную длину. Этот механизм лежит в основе форматирования телефонов, банковских карт, серийных кодов и любых строк с предсказуемой сегментацией.

Принцип работы blocks

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

Пример базовой логики:

blocks: [3, 3, 4]

Это означает:

  • первый блок — 3 символа
  • второй блок — 3 символа
  • третий блок — 4 символа

При вводе строки 1234567890 результат форматирования будет:

123 456 7890

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

Связь blocks и delimiters

На практике blocks почти всегда используется вместе с delimiter, поскольку именно он визуально разделяет группы.

new Cleave(input, {
    blocks: [4, 4, 4, 4],
    delimiter: '-'
});

Ввод:

1234567812345678

Вывод:

1234-5678-1234-5678

Важно понимать, что blocks не отвечает за символ разделения, он только определяет структуру. Формат отображения полностью контролируется параметром delimiter.

Использование в банковских картах

Один из самых распространённых сценариев — форматирование номеров карт.

new Cleave(input, {
    blocks: [4, 4, 4, 4],
    delimiter: ' '
});

Результат:

4111 1111 1111 1111

Для карт с переменной длиной (например, American Express) структура отличается:

new Cleave(input, {
    blocks: [4, 6, 5],
    delimiter: ' '
});

Результат:

3782 822463 10005

Здесь видно, что blocks позволяет описывать нестандартные форматы без изменения логики библиотеки.

Переменная длина ввода и поведение blocks

Cleave.js не требует обязательного заполнения всех блоков. Если пользователь вводит меньше символов, чем суммарная длина blocks, форматирование применяется частично.

blocks: [3, 3, 4]

Ввод:

12345

Вывод:

123 45

При этом библиотека динамически перераспределяет символы по мере ввода, не нарушая структуру.

Комбинация с другими параметрами

blocks часто используется совместно с другими настройками:

1. numericOnly

Ограничивает ввод только числами:

new Cleave(input, {
    numericOnly: true,
    blocks: [3, 3, 4],
    delimiter: '-'
});

Это особенно важно для телефонных и идентификационных форматов.

2. uppercase / lowercase

Используется для кодов и серийных номеров:

new Cleave(input, {
    blocks: [4, 4, 4],
    delimiter: '-',
    uppercase: true
});

3. prefix

При добавлении фиксированного начала строки blocks применяется только к части после префикса:

new Cleave(input, {
    prefix: 'ID-',
    blocks: [3, 3, 3],
    delimiter: '.'
});

Результат:

ID-123.456.789

Динамическое поведение при удалении символов

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

Например:

blocks: [2, 2, 2]

Ввод:

123456

Отображение:

12 34 56

Удаление одного символа:

12 34 5

Удаление ещё одного:

12 34

Поведение остаётся стабильным независимо от направления редактирования.

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

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

UUID-подобные строки:

new Cleave(input, {
    blocks: [8, 4, 4, 4, 12],
    delimiter: '-'
});

Результат:

12345678-1234-1234-1234-123456789abc

Артикулы и внутренние коды:

new Cleave(input, {
    blocks: [2, 3, 2, 4],
    delimiter: '/'
});

Результат:

AB/123/CD/4567

Ограничения и особенности поведения

Несмотря на гибкость, параметр blocks имеет ряд особенностей:

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

Взаимодействие с пользовательским вводом

При работе с формами blocks обеспечивает предсказуемое поведение ввода:

  • курсор автоматически перемещается через разделители
  • вставка текста корректно перераспределяет символы по блокам
  • копирование и вставка длинных строк приводит к автоматическому форматированию по заданной структуре

Пример:

new Cleave(input, {
    blocks: [3, 3, 3, 3],
    delimiter: ' '
});

Вставка:

123456789012

Результат:

123 456 789 012

Практическая роль в архитектуре Cleave.js

blocks является одним из базовых строительных элементов системы форматирования Cleave.js. Он не привязан к конкретному типу данных и работает как универсальный механизм разбиения строки.

Внутри библиотеки он используется как часть более общей системы трансформации ввода, где:

  • blocks задаёт структуру
  • delimiter определяет визуальное разделение
  • numericOnly, uppercase и другие параметры управляют нормализацией символов

Такой подход позволяет одной и той же логике обработки применяться к разным типам данных без переписывания поведения.

Оглавление