Получение и установка значений

Базовая модель хранения данных в Inputmask

В библиотеке Inputmask значение поля ввода разделяется на два уровня представления:

  • Отображаемое значение (masked value) — строка с применённой маской, включая литералы, разделители и фиксированные символы.
  • Сырое значение (unmasked value) — данные без форматирования, содержащие только значимые символы.

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

Влияние маски на значение поля

После инициализации маски Inputmask перехватывает все операции записи и чтения значения поля. Прямое использование input.value возвращает уже отформатированную строку:

const input = document.querySelector("#phone");
console.log(input.value);

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

+7 (777) 123-45-67

Однако фактические данные, которые часто требуются в бизнес-логике, содержат только цифры:

77771234567

Получение отображаемого значения

Отображаемое значение всегда доступно через стандартное свойство DOM:

const maskedValue = input.value;

В jQuery-обёртке:

const maskedValue = $("#phone").val();

Это значение включает все символы маски и полностью соответствует тому, что видно пользователю.

Получение «чистого» значения (unmasked value)

Inputmask предоставляет отдельный механизм для извлечения данных без форматирования.

Vanilla JS
const unmasked = input.inputmask.unmaskedvalue();
jQuery
const unmasked = $("#phone").inputmask("unmaskedvalue");

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

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

Получение значения через Inputmask API

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

const unmasked = Inputmask.unmask(input.value, {
  mask: "+7 (999) 999-99-99"
});

Этот подход применяется, когда экземпляр маски не привязан к DOM-элементу или требуется преобразование строки вне контекста поля ввода.

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

Для анализа текущего состояния поля используется вспомогательный метод получения «пустой маски»:

const empty = input.inputmask.getemptymask();

Он возвращает строку, соответствующую исходной маске без введённых данных, например:

+7 (___) ___-__-__

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

Установка значения через стандартный DOM API

Прямое присваивание через value не всегда корректно обрабатывает маску:

input.value = "77771234567";

В этом случае Inputmask может не применить форматирование автоматически, если не инициирован соответствующий обработчик событий.

Для корректной работы рекомендуется использовать API библиотеки.

Установка значения через Inputmask

Vanilla JS
input.inputmask.setValue("77771234567");
Альтернативный глобальный метод
Inputmask.setValue(input, "77771234567");

Оба варианта обеспечивают:

  • применение маски к переданному значению
  • автоматическое форматирование отображаемой строки
  • синхронизацию внутреннего состояния маски

Установка значения через jQuery

$("#phone").inputmask("setvalue", "77771234567");

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

  1. значение передаётся в маску
  2. применяется форматирование
  3. обновляется DOM-значение
  4. синхронизируется внутреннее состояние Inputmask

Поведение при частичном значении

Если передаваемая строка не соответствует маске, Inputmask выполняет частичное заполнение:

input.inputmask.setValue("7777");

Результат может выглядеть как:

+7 (777) ___-__-__

Незаполненные позиции остаются в состоянии placeholder, определённом маской.

Обновление значения при динамической смене данных

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

input.inputmask.setValue(newValue);

В этом режиме:

  • маска сохраняется
  • старое значение полностью заменяется
  • пересчитывается отображение

Очистка значения

Очистка выполняется установкой пустого значения:

input.inputmask.setValue("");

или через jQuery:

$("#phone").inputmask("setvalue", "");

В результате поле возвращается к состоянию пустой маски.

Особенности взаимодействия с null и undefined

Передача null или undefined интерпретируется как пустое значение:

input.inputmask.setValue(null);

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

Синхронизация значения после программного изменения

После установки значения библиотека выполняет внутреннюю нормализацию:

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

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

Различие между setValue и прямым присваиванием

Способ Поведение маски Форматирование Надёжность
input.value = ... не гарантируется частичное низкая
setValue(...) полная обработка всегда применяется высокая
jQuery setvalue полная обработка всегда применяется высокая

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

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

В большинстве сценариев используется именно unmasked value:

const payload = {
  phone: input.inputmask.unmaskedvalue()
};

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

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

Работа с числовыми и текстовыми масками

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

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

При текстовых масках сохраняются только символы, определённые правилами definitions.

Влияние событий на значение

Любое изменение значения через Inputmask сопровождается генерацией событий:

  • input
  • change
  • complete (при полном заполнении маски)

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

Оглавление