Сброс и очистка значений

Модель хранения состояния и особенности форматирования

Cleave.js работает поверх DOM-элемента <input> и разделяет два ключевых уровня данных:

  • отображаемое значение (formatted value) — строка с масками, разделителями, пробелами;
  • сырое значение (raw value) — «чистая» строка без форматирования.

При очистке или сбросе важно учитывать, что изменение только DOM-значения не всегда синхронизирует внутреннее состояние экземпляра. Библиотека поддерживает собственный кэш, который может восстанавливать формат при следующих событиях ввода.

Полная очистка поля через DOM-значение

Базовый способ сброса — прямое изменение значения input:

input.value = '';

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

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

Очистка через экземпляр Cleave

Корректная очистка выполняется через API экземпляра:

cleave.setRawValue('');

Такой способ обеспечивает:

  • синхронное обновление raw value;
  • пересчёт formatted value;
  • сохранение корректного состояния маски;
  • отсутствие «залипания» старых символов форматирования.

При использовании числовых масок или phone-паттернов этот метод является предпочтительным.

Сброс значения в числовых масках

При работе с числовыми форматами (например, разделители тысяч или фиксированная точность) очистка через пустую строку может приводить к отображению нулей в зависимости от конфигурации.

Пример:

const cleave = new Cleave(input, {
  numeral: true,
  numeralDecimalScale: 2
});

cleave.setRawValue('');

В таких сценариях возможны следующие состояния:

  • пустое поле (если не задано numeralPositiveOnly и отсутствует дефолтное значение);
  • автоматическое восстановление формата при фокусе;
  • отображение нуля при внешней инициализации значения.

Сброс через уничтожение экземпляра

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

cleave.destroy();

После выполнения:

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

Этот способ применяется при динамической смене форматов или при повторной инициализации компонента.

После destroy() очистка выполняется стандартным образом:

input.value = '';

Поведение при reset формы

При использовании HTML-формы с кнопкой reset поведение зависит от способа инициализации:

<form>
  <input id="phone">
  <button type="reset">Reset</button>
</form>

Если Cleave.js привязан к input, браузер сбрасывает значение до initialValue, но библиотека может повторно применить форматирование после события reset.

Для корректной синхронизации часто используется обработка события:

form.addEventListener('reset', () => {
  cleave.setRawValue('');
});

Это устраняет расхождение между DOM reset и внутренним состоянием маски.

Очистка при динамической смене данных

В приложениях с динамическими формами (SPA) очистка часто связана с переиспользованием одного input под разные маски.

Типичный сценарий:

  • поле сначала используется как телефон;
  • затем как банковская карта;
  • затем очищается при переключении режима.

В этом случае последовательность:

cleave.destroy();
input.value = '';
const cleave = new Cleave(input, newConfig);

обеспечивает полное обнуление состояния.

Программная установка пустого состояния

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

cleave.setRawValue(null);

или

cleave.setRawValue('');

Разница зависит от версии и конфигурации:

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

Очистка в связке с внешним состоянием

При интеграции Cleave.js с фреймворками (React, Vue, Angular) важно учитывать, что очистка может происходить на двух уровнях:

  1. UI-уровень — input.value
  2. state-уровень — состояние компонента

Если очищается только DOM, а state остаётся прежним, Cleave может восстановить старое значение при следующем ререндере.

Корректная модель:

setState({ phone: '' });
cleave.setRawValue('');

Очистка масок сложных форматов

При использовании комбинированных масок (например, дата + время, кастомные блоки) очистка должна учитывать структуру шаблона.

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

  • маска DD/MM/YYYY при очистке возвращается к пустым сегментам;
  • некоторые символы-разделители могут оставаться визуально, но не участвуют в значении;
  • повторный ввод восстанавливает структуру автоматически.
cleave.setRawValue('');

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

Типичные состояния после очистки

После выполнения очистки через API возможны три устойчивых состояния:

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

Поведение определяется комбинацией настроек:

  • numeral
  • date
  • phone
  • delimiter
  • prefix

Управление очисткой при пользовательских событиях

Очистка часто привязывается к событиям интерфейса:

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

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

function clearField(cleave, input) {
  cleave.setRawValue('');
  input.value = '';
}

Это гарантирует согласованность между DOM и внутренним состоянием Cleave.js.

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

После очистки библиотека возвращается в исходное состояние:

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

Это делает поведение предсказуемым при повторном вводе данных без необходимости переинициализации экземпляра.

Оглавление