Делимитеры и их позиционирование

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

Наиболее распространённые примеры:

пробелы между группами цифр банковской карты;
дефисы в серийных номерах;
точки в датах;
косые черты в кодах;
пользовательские символы-разделители.

Без делимитеров строка:

4111111111111111

превращается в:

4111 1111 1111 1111

или:

4111-1111-1111-1111

в зависимости от конфигурации.

Базовое использование `delimiter`

Основной параметр для задания разделителя — delimiter.

Пример:

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

Результат ввода:

1234-5678-9012-3456

Как это работает

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

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

Наиболее частый вариант — пробел.

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

Результат:

1234 5678 9012 3456

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

банковских карт;
IBAN;
длинных идентификаторов;
кодов активации.

Делимитеры из нескольких символов

Cleave.js поддерживает многосимвольные разделители.

Пример:

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

Результат:

123 :: 456 :: 789

Это полезно для:

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

Разделение дат

Форматирование дат — один из наиболее типичных сценариев.

new Cleave('.date', {
    date: true,
    datePattern: ['d', 'm', 'Y'],
    delimiter: '.'
});

Результат:

31.12.2025

Другие варианты:

delimiter: '/'

Результат:

31/12/2025

или:

delimiter: '-'

Результат:

31-12-2025

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

Пример:

new Cleave('.phone', {
    blocks: [3, 3, 2, 2],
    delimiter: '-',
    numericOnly: true
});

Результат:

777-123-45-67

Часто используется комбинация разных символов:

+7 (777) 123-45-67

Для такого формата обычно применяются пользовательские блоки.

Работа с `delimiters`

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

Отличие от `delimiter`

delimiter — один символ или строка для всех разделений;
delimiters — массив разных разделителей.

Пример:

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

Результат:

12/34-5678

Соответствие количества разделителей

Количество элементов в delimiters должно быть на единицу меньше количества блоков.

Правильно:

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

Неправильно:

blocks: [2, 2, 4]
delimiters: ['/']

Некорректное количество может привести к неожиданному поведению форматирования.

Комбинирование различных разделителей

Пример сложного формата:

new Cleave('.serial', {
    blocks: [3, 2, 4, 2],
    delimiters: ['-', '/', ':']
});

Результат:

123-45/6789:10

Такой подход применяется для:

серийных номеров;
технических кодов;
производственных идентификаторов;
внутренних регистрационных форматов.

Позиционирование делимитеров

Позиция разделителя зависит от:

размеров блоков;
последовательности ввода;
конфигурации blocks.

Пример:

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

После ввода первых четырёх символов автоматически появляется:

1234-

После заполнения второго блока:

1234-5678-

Влияние блоков на размещение разделителей

Размеры блоков напрямую определяют положение делимитеров.

Пример:

blocks: [2, 6, 2]
delimiter: ':'

Результат:

12:345678:90

Если изменить размеры:

blocks: [4, 4, 2]

то формат станет:

1234:5678:90

Автоматическое смещение курсора

Cleave.js автоматически корректирует позицию курсора при вставке делимитеров.

Без этого механизма возникали бы проблемы:

курсор перескакивал бы в конец строки;
удаление символов становилось бы неудобным;
редактирование середины строки нарушалось бы.

Библиотека отслеживает:

текущую позицию курсора;
длину форматированной строки;
появление новых разделителей.

Удаление символов рядом с делимитером

Особенность поведения:

1234-5678

При удалении цифры перед делимитером библиотека корректно перестраивает строку:

1235-678

а не оставляет:

123-5678

Это достигается за счёт внутреннего механизма перерасчёта блоков.

Поведение при вставке текста

При вставке:

1234567890123456

в поле с конфигурацией:

blocks: [4, 4, 4, 4],
delimiter: ' '

результат автоматически преобразуется в:

1234 5678 9012 3456

Разделители добавляются даже при массовой вставке значения.

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

В качестве делимитера можно использовать практически любой символ.

Примеры:

delimiter: '|'

1234|5678|9012

delimiter: '*'

1234*5678*9012

delimiter: '#'

1234#5678#9012

Unicode-делимитеры

Поддерживаются Unicode-символы.

Пример:

delimiter: '•'

Результат:

1234•5678•9012

Другой вариант:

delimiter: '→'

Результат:

1234→5678→9012

Пустой делимитер

Иногда требуется использование блоков без визуального разделителя.

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

Формально блоки продолжают существовать, но визуально строка выглядит непрерывной:

123456789012

Такой подход применяется редко, поскольку теряется смысл форматирования.

Delimiter и `prefix`

Разделитель может использоваться вместе с префиксом.

Пример:

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

Результат:

ACC123-456-789

Поведение с `numericOnly`

При использовании:

numericOnly: true

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

Пример:

new Cleave('.card', {
    blocks: [4, 4, 4, 4],
    delimiter: ' ',
    numericOnly: true
});

Разделители и копирование значения

Важно понимать различие между:

форматированным значением;
«сырым» значением.

Пример:

1234-5678-9012

Получение форматированного значения

input.value

Результат:

1234-5678-9012

Получение raw value

cleave.getRawValue()

Результат:

123456789012

Делимитеры автоматически удаляются из raw value.

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

Возможны конструкции вида:

delimiter: '--'

Результат:

1234--5678--9012

или:

delimiter: ' / '

Результат:

1234 / 5678 / 9012

Влияние делимитеров на UX

Грамотно выбранные разделители:

ускоряют восприятие информации;
уменьшают количество ошибок;
улучшают читаемость длинных строк;
упрощают проверку данных;
делают ввод визуально предсказуемым.

Плохой выбор делимитеров приводит к:

перегруженному интерфейсу;
визуальному шуму;
сложностям редактирования;
ошибкам копирования.

Частые ошибки

Неверное количество delimiters

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

Один разделитель не соответствует двум границам между блоками.

Слишком длинные разделители

delimiter: '------'

Избыточные символы ухудшают читаемость.

Конфликт с пользовательским вводом

Проблемный пример:

delimiter: '1'

Разделитель совпадает с допустимым вводом и визуально запутывает строку.

Использование визуально похожих символов

Например:

delimiter: '.'

и:

delimiter: '•'

могут выглядеть слишком похоже в некоторых шрифтах.

Практический пример сложного форматирования

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

Результат:

AB/CD12-EF34:56

Такой формат подходит для:

регистрационных кодов;
инвентарных номеров;
внутренних идентификаторов;
логистических меток.

Форматирование банковских карт

Классический пример:

new Cleave('.card', {
    creditCard: true,
    delimiter: ' '
});

Результат:

4111 1111 1111 1111

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

Например:

Visa — 4-4-4-4;
American Express — 4-6-5.

Динамическое изменение разделителей

Конфигурацию можно пересоздавать динамически.

Пример:

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

Позже:

cleave.destroy();

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

Формат изменится с:

1234-5678-9012

на:

1234:5678:9012

Внутренний принцип работы делимитеров

Во время ввода библиотека:

удаляет существующие разделители;
формирует raw value;
разбивает строку по блокам;
заново вставляет delimiters;
восстанавливает позицию курсора.

Именно поэтому форматирование остаётся стабильным даже при:

вставке текста;
удалении символов;
редактировании середины строки;
быстрой печати;
мобильном вводе.

Делимитеры и их позиционирование

Базовое использование delimiter

Как это работает

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

Делимитеры из нескольких символов

Разделение дат

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

Работа с delimiters

Отличие от delimiter

Соответствие количества разделителей

Комбинирование различных разделителей

Позиционирование делимитеров

Влияние блоков на размещение разделителей

Автоматическое смещение курсора

Удаление символов рядом с делимитером

Поведение при вставке текста

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

Unicode-делимитеры

Пустой делимитер

Delimiter и prefix

Поведение с numericOnly

Разделители и копирование значения

Получение форматированного значения

Получение raw value

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

Влияние делимитеров на UX

Частые ошибки

Неверное количество delimiters

Слишком длинные разделители

Конфликт с пользовательским вводом

Использование визуально похожих символов

Практический пример сложного форматирования

Форматирование банковских карт

Динамическое изменение разделителей

Внутренний принцип работы делимитеров

Базовое использование `delimiter`

Работа с `delimiters`

Отличие от `delimiter`

Delimiter и `prefix`

Поведение с `numericOnly`