Настройка delimiter и delimiters

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

Классический пример — форматирование чисел:

const cleave = new Cleave(input, {
    numeral: true,
    delimiter: ','
});

В этом случае библиотека автоматически вставляет запятую как разделитель тысяч:

  • 1000 → 1,000
  • 1000000 → 1,000,000

Поведение delimiter в числовом режиме

При использовании numeral: true параметр delimiter становится частью механизма форматирования чисел:

  • применяется для группировки разрядов
  • работает совместно с numeralThousandsGroupStyle
  • не влияет на дробную часть числа

Дополнительные варианты:

new Cleave(input, {
    numeral: true,
    delimiter: ' '
});

Результат:

  • 1000000 → 1 000 000

или:

new Cleave(input, {
    numeral: true,
    delimiter: '.'
});
  • 1000000 → 1.000.000

Ограничения delimiter

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

Параметр delimiters — множественные разделители и сложные маски

В отличие от delimiter, параметр delimiters применяется в масках, где требуется несколько разделителей или фиксированная структура с разными символами.

Он используется вместе с blocks, формируя формат с несколькими логическими сегментами.

Базовая структура

const cleave = new Cleave(input, {
    delimiters: ['-', '-'],
    blocks: [3, 3, 4],
    numericOnly: true
});

Такой код формирует структуру наподобие телефонного номера:

  • 1234567890 → 123-456-7890

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

delimiters — это массив символов, которые вставляются между блоками, определёнными в blocks.

Для конфигурации:

blocks: [3, 2, 2]
delimiters: ['.', '/']

результат будет:

  • 1234567 → 123.45/67

Соответствие между blocks и delimiters

Важное правило:

  • количество delimiters всегда = blocks.length - 1

Пример:

blocks: [4, 4, 4, 4]
delimiters: ['-', '-', '-']

Это соответствует формату:

  • 1234123412341234 → 1234-1234-1234-1234

Комбинации blocks и delimiters в сложных форматах

Телефонные номера

new Cleave(input, {
    numericOnly: true,
    blocks: [1, 3, 3, 2, 2],
    delimiters: ['+', ' ', ' ', '-']
});

Результат:

  • 71234567890 → +7 123 456-78-90

Здесь:

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

Форматы идентификаторов

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

Пример:

  • abcd1234efgh5678ijkl → ABCD-1234-EFGH-5678-IJKL

Даты и составные форматы

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

Результат:

  • 01012026 → 01/01/2026

Динамическое поведение delimiters

Cleave.js не просто вставляет символы — он пересчитывает структуру при каждом вводе символа.

Особенности:

  • при удалении символов разделители пересчитываются автоматически
  • пользователь не может «сломать» структуру ввода
  • вставка текста снаружи нормализуется под заданную маску

Пример поведения:

Ввод:

123456

С конфигурацией:

blocks: [3, 3],
delimiters: ['-']

Результат:

123-456

При удалении:

123-45

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

Различие логики delimiter и delimiters

delimiter

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

delimiters

  • массив символов
  • работает только вместе с blocks
  • задаёт структуру маски
  • применяется к сложным форматам

Сложные комбинации с буквенно-цифровыми данными

Серийные коды

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

Пример результата:

  • AB1234CD56 → AB-1234:CD56

Смешанные форматы

new Cleave(input, {
    blocks: [3, 2, 3, 2],
    delimiters: ['.', '-', '/'],
    uppercase: true
});

Результат:

  • abc123def45 → ABC.12-3DEF/45

Особенности обработки пользовательского ввода

Вставка текста

При вставке строки Cleave.js:

  • удаляет неподходящие символы
  • переразбивает данные по blocks
  • повторно вставляет delimiters

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

  • удаление в середине блока не нарушает структуру
  • разделители исчезают автоматически при обнулении блока
  • курсор корректируется для сохранения логики ввода

Типичные ошибки конфигурации

Несоответствие длины массивов

blocks: [3, 3, 3],
delimiters: ['-']

Ошибка логики:

  • недостаточно разделителей для всех блоков
  • последний сегмент не отделяется

Избыточные разделители

blocks: [3, 3],
delimiters: ['-', '-', '-']

Результат:

  • лишние символы игнорируются или вызывают некорректное поведение

Попытка использовать delimiter вместе с delimiters

Эти параметры не предназначены для одновременного применения в одном формате:

  • delimiter работает в числовом режиме
  • delimiters работает в блочном режиме

Совмещение приводит к конфликту логики форматирования

Поведение при изменении конфигурации на лету

Cleave.js позволяет динамически менять настройки:

cleave.setRawValue('1234567890');

cleave.properties.blocks = [3, 2, 2, 3];
cleave.properties.delimiters = ['.', '.', '-'];

cleave.init();

После повторной инициализации:

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

Влияние delimiters на UX ввода

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

  • улучшает читаемость сложных идентификаторов
  • снижает вероятность ошибок ввода
  • формирует визуальные «сегменты» данных

Однако избыточная дробность может:

  • усложнить копирование значений
  • запутать при нестандартных форматах
  • увеличить количество ошибок при ручном вводе

Сочетание с другими параметрами Cleave.js

numericOnly

blocks: [3, 3, 4],
delimiters: ['-', '-'],
numericOnly: true

Ограничивает ввод только цифрами, сохраняя структуру разделителей.

uppercase и lowercase

blocks: [4, 4],
delimiters: ['-'],
uppercase: true

Применяет трансформацию регистра без влияния на разделители.

prefix

prefix: 'ID',
blocks: [3, 3],
delimiters: ['-']

Результат:

  • ID123456 → ID123-456

Итоговые особенности архитектуры разделителей

  • delimiter — инструмент простого форматирования чисел
  • delimiters — механизм построения структурных масок
  • связка с blocks определяет поведение всей системы ввода
  • внутренняя логика Cleave.js динамически пересобирает строку при каждом вводе
  • корректная конфигурация требует строгого соответствия между блоками и разделителями
Оглавление