Vanilla Masker

Работа с масками ввода в чистом JavaScript в экосистеме Inputmask строится вокруг прямого подключения библиотеки и применения маски к DOM-элементам без участия фреймворков, сборщиков или реактивных слоёв. Такой подход называется vanilla-режимом и подразумевает максимальную близость к нативному DOM API.

Архитектура vanilla-подхода

Vanilla-режим Inputmask опирается на три базовых шага:

  1. Получение DOM-элемента через стандартные методы (querySelector, getElementById, querySelectorAll)
  2. Создание экземпляра маски через Inputmask()
  3. Привязка маски к элементу через .mask()

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

Базовое подключение и инициализация

В vanilla-сценарии библиотека подключается как глобальный объект Inputmask, доступный в window.

<script src="inputmask.min.js"></script>

После подключения доступна глобальная функция-конструктор:

const mask = new Inputmask("99-99-9999");
mask.mask(document.querySelector("#date"));

Здесь создаётся маска для формата даты, где 9 означает обязательную цифру.

Прямое применение маски к элементам

Самый распространённый паттерн — применение маски без промежуточных переменных:

Inputmask("(999) 999-9999").mask(document.getElementById("phone"));

Под капотом происходит:

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

Маскирование нескольких элементов

Vanilla-подход легко масштабируется на коллекции DOM-узлов:

const inputs = document.querySelectorAll(".phone-input");

Inputmask("+7 (999) 999-99-99").mask(inputs);

Библиотека автоматически применяет маску ко всем элементам NodeList, обрабатывая их независимо друг от друга.

Использование конфигурационного объекта

Помимо строкового шаблона, маска может быть задана через объект конфигурации:

Inputmask({
  mask: "9999 9999 9999 9999",
  placeholder: "_",
  showMaskOnHover: false,
  showMaskOnFocus: true
}).mask("#card");

Ключевые параметры:

  • mask — шаблон ввода
  • placeholder — символ заполнителя
  • showMaskOnHover — отображение маски при наведении
  • showMaskOnFocus — отображение при фокусе

Поведение символов маски

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

  • 9 — цифра (0–9)
  • a — буква (A–Z, a–z)
  • * — буквенно-цифровой символ
  • [] — необязательные блоки
  • {} — квантификаторы повторения

Пример комбинированной маски:

Inputmask("aa-9999[a]").mask("#code");

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

Очистка и неполные значения

В vanilla-режиме часто важно контролировать поведение при потере фокуса:

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

Если пользователь не завершил ввод, значение будет очищено.

Другой режим — сохранение частично введённых данных:

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

Динамическое применение маски

Vanilla-режим позволяет изменять маску на лету:

const im = new Inputmask("999-999");
im.mask("#field");

// позже
im.setOptions({ mask: "9999-9999" });
im.mask(document.querySelector("#field"));

Это полезно при изменении логики формы в зависимости от состояния приложения.

Работа с событиями

Inputmask предоставляет набор callback-событий для отслеживания состояния ввода:

Inputmask({
  mask: "9999-9999",
  oncomplete: function () {
    console.log("Ввод завершён");
  },
  onincomplete: function () {
    console.log("Ввод не завершён");
  },
  oncleared: function () {
    console.log("Поле очищено");
  }
}).mask("#phone");

Основные события:

  • oncomplete — маска заполнена полностью
  • onincomplete — ввод прерван
  • oncleared — значение очищено

Маскирование без отображения символов

В некоторых сценариях требуется скрывать вводимые данные:

Inputmask({
  mask: "9999-9999-9999-9999",
  showMaskOnFocus: false,
  showMaskOnHover: false
}).mask("#hidden");

Это изменяет поведение UI, но не отключает внутреннюю логику валидации.

Интеграция с form submit

Vanilla-режим сохраняет совместимость с нативными формами HTML. Значение input передаётся как обычное поле:

document.querySelector("form").addEventListener("submit", (e) => {
  const value = document.querySelector("#phone").value;
});

Библиотека не требует дополнительной сериализации данных.

Маски с регулярными выражениями

Помимо шаблонов, поддерживаются regex-маски:

Inputmask({
  mask: /[A-Z]{3}-\d{4}/
}).mask("#custom");

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

Маскирование через data-атрибуты

Vanilla-подход часто комбинируется с декларативной разметкой:

<input id="phone" data-inputmask="'mask': '(999) 999-9999'">

Инициализация:

Inputmask().mask(document.querySelectorAll("input"));

Библиотека автоматически считывает конфигурацию из DOM.

Обработка вставки (paste)

Внутренний механизм Inputmask анализирует вставленные данные:

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

Пример:

Inputmask("9999-9999").mask("#field");

При вставке 12345678 автоматически формируется 1234-5678.

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

Vanilla-режим оптимизирован для работы без зависимостей от виртуального DOM:

  • минимальное количество перерисовок
  • прямое управление value input
  • обработка событий на уровне DOM
  • отсутствие runtime-библиотек

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

Ограничения vanilla-подхода

Несмотря на универсальность, существуют ограничения:

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

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

Оглавление