clearMaskOnLostFocus и clearIncomplete

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

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

Базовая логика

  • при true — незаполненная маска очищается при уходе из поля
  • при false — частично введённое значение остаётся видимым

Сценарий работы

Маска телефонного номера:

Inputmask({
  mask: "+7 (999) 999-99-99",
  clearMaskOnLostFocus: true
}).mask(input);

Поведение:

  • пользователь ввёл: +7 (7
  • поле теряет фокус
  • значение очищается, так как маска не заполнена полностью

При противоположной настройке:

Inputmask({
  mask: "+7 (999) 999-99-99",
  clearMaskOnLostFocus: false
}).mask(input);

Поведение:

  • пользователь ввёл: +7 (7
  • поле теряет фокус
  • введённая часть остаётся в поле

Внутренняя логика и условия очистки

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

Учитываются:

  • обязательные позиции маски
  • символы-заменители (placeholder)
  • правила определения incomplete-состояния
  • опция showMaskOnHover и showMaskOnFocus (косвенно влияют на визуальное восприятие состояния)

Если маска считается невалидно заполненной, активируется механизм очистки при blur.

Незавершённый ввод: clearIncomplete

Параметр clearIncomplete определяет поведение при незавершённой маске в момент сериализации или потери фокуса.

Основное назначение

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

Поведение

Inputmask({
  mask: "99/99/9999",
  clearIncomplete: true
}).mask(input);

Логика:

  • если дата введена частично, например 12/0
  • значение очищается при определённых триггерах (blur, getValue, submit-обработки)

При отключённой опции:

Inputmask({
  mask: "99/99/9999",
  clearIncomplete: false
}).mask(input);

Логика:

  • частично введённые данные сохраняются как есть
  • например 12/0 остаётся в input

Отличие clearMaskOnLostFocus и clearIncomplete

Несмотря на внешнее сходство, эти параметры работают на разных уровнях жизненного цикла значения.

Поведение clearMaskOnLostFocus clearIncomplete
Реакция на blur да косвенно
Очистка незаполненной маски да нет
Контроль сериализации нет да
Влияние на submit/getValue минимальное значительное

Комбинированные сценарии

Оба параметра включены

Inputmask({
  mask: "+7 (999) 999-99-99",
  clearMaskOnLostFocus: true,
  clearIncomplete: true
}).mask(input);

Результат:

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

clearMaskOnLostFocus = true, clearIncomplete = false

Inputmask({
  mask: "99-999",
  clearMaskOnLostFocus: true,
  clearIncomplete: false
}).mask(input);

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

  • визуально поле очищается при blur
  • но при программном доступе часть данных может сохраняться до момента очистки DOM-значения

clearMaskOnLostFocus = false, clearIncomplete = true

Inputmask({
  mask: "99-99",
  clearMaskOnLostFocus: false,
  clearIncomplete: true
}).mask(input);

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

  • частичный ввод остаётся видимым после blur
  • при извлечении значения incomplete-данные очищаются

Влияние на методы getValue и value

Inputmask перехватывает доступ к значению поля и применяет внутреннюю нормализацию.

При clearIncomplete = true

  • getValue() возвращает пустую строку при незавершённой маске
  • input.value может временно содержать отображаемые символы, но логическое значение считается пустым

При clearIncomplete = false

  • getValue() возвращает фактически введённые данные
  • частичные значения считаются валидным промежуточным состоянием

Взаимодействие с placeholder и showMaskOnFocus

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

showMaskOnFocus

  • отображает полную маску при фокусе
  • может создавать ощущение «пустого, но заполненного» поля

placeholder

  • заполняет пустые позиции маски символами-заполнителями
  • влияет на определение incomplete-состояния

Типовые прикладные сценарии

Формы с жёсткой валидацией

Используется комбинация:

  • clearMaskOnLostFocus: true
  • clearIncomplete: true

Характерно для:

  • банковских форм
  • регистрационных данных
  • идентификаторов

Формы с мягким вводом

Используется:

  • clearMaskOnLostFocus: false
  • clearIncomplete: false

Характерно для:

  • поисковых полей
  • вспомогательных форм
  • чернового ввода данных

Асинхронная валидация

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

  • clearMaskOnLostFocus: false
  • clearIncomplete: true

Позволяет:

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

Влияние на UX и консистентность данных

Поведение этих параметров напрямую влияет на:

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

Inputmask фактически разделяет визуальное представление и логическое значение, а clearMaskOnLostFocus и clearIncomplete управляют границей между этими слоями.

Частые конфигурационные конфликты

Конфликт сохранения частичного ввода

При одновременной необходимости:

  • сохранять визуальный ввод
  • и очищать значение для submit

возникает расхождение между UI и данными, особенно при clearIncomplete: false.

Конфликт с автозаполнением браузера

Автозаполнение может:

  • частично заполнять маску
  • триггерить blur-события

В сочетании с clearMaskOnLostFocus: true это может приводить к неожиданной очистке поля.

Поведение при программной установке значения

При input.value = "..." и последующем применении маски:

  • incomplete-состояние пересчитывается
  • clearIncomplete может обнулить значение при синхронизации
  • clearMaskOnLostFocus не участвует напрямую, но влияет при последующем blur

Итоговые паттерны использования

Часто встречающиеся комбинации:

  • строгая форма ввода: оба параметра true
  • аналитические поля: оба false
  • гибридные формы: clearMaskOnLostFocus = true, clearIncomplete = false

Поведение этих параметров формирует базовую стратегию обработки незавершённых данных в Inputmask, определяя границу между временным вводом и финальным значением.

Оглавление