Vanilla JavaScript подход

Библиотека Inputmask представляет собой инструмент для наложения масок ввода на HTML-поля без привязки к конкретным фреймворкам. В Vanilla JavaScript подходе она используется напрямую через глобальный объект или импортируемый модуль, что обеспечивает максимальную гибкость и контроль над поведением ввода.

Основная цель библиотеки — структурировать пользовательский ввод в соответствии с заданным шаблоном: телефонные номера, даты, числовые значения, идентификаторы и любые пользовательские форматы.

Подключение библиотеки

Варианты подключения зависят от окружения.

Подключение через CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/5.0.8/inputmask.min.js"></script>

После подключения библиотека становится доступной через глобальный объект Inputmask.

Подключение через npm

npm install inputmask

Использование в модульной среде:

import Inputmask from "inputmask";

Базовая инициализация маски

В Vanilla JavaScript маска применяется напрямую к DOM-элементу.

<input id="phone" type="text" />
const phoneInput = document.getElementById("phone");

const mask = new Inputmask("+7 (999) 999-99-99");
mask.mask(phoneInput);

Ключевой момент заключается в том, что объект Inputmask создаётся как экземпляр, после чего вызывается метод mask, который связывает логику библиотеки с конкретным DOM-элементом.

Синтаксис масок

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

  • 9 — обязательная цифра
  • 0 — необязательная цифра
  • A — обязательная буква
  • a — необязательная буква
  • * — любой символ

Пример маски для серийного кода:

const serialMask = new Inputmask("AA-9999-****");
serialMask.mask(document.getElementById("serial"));

Автоматическое применение ко множеству элементов

Маску можно применять ко всем элементам, подходящим под селектор.

<input class="date" />
<input class="date" />
const dateMask = new Inputmask("99.99.9999");

document.querySelectorAll(".date").forEach((el) => {
  dateMask.mask(el);
});

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

Конфигурация через объект параметров

Помимо строковой маски, Inputmask поддерживает объект конфигурации.

const currencyMask = new Inputmask({
  alias: "numeric",
  groupSeparator: " ",
  digits: 2,
  digitsOptional: false,
  prefix: "$ ",
  rightAlign: false
});

currencyMask.mask(document.getElementById("price"));

Использование объектов позволяет управлять логикой форматирования, а не только структурой символов.

Использование алиасов

Алиасы представляют собой предустановленные конфигурации для типовых форматов.

const dateMask = new Inputmask({
  alias: "datetime",
  inputFormat: "dd/mm/yyyy"
});

dateMask.mask(document.getElementById("date"));

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

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

Inputmask поддерживает расширенные шаблоны через регулярные выражения.

const regexMask = new Inputmask({
  regex: "[A-Z]{3}-[0-9]{4}"
});

regexMask.mask(document.getElementById("code"));

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

Обновление маски динамически

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

const input = document.getElementById("dynamic");

const mask = new Inputmask("9999");
mask.mask(input);

mask.setOptions({
  mask: "9999-9999"
});

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

Удаление маски

В некоторых случаях требуется отключить форматирование.

Inputmask.remove(document.getElementById("phone"));

После удаления элемент возвращается к стандартному поведению HTML input.

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

Inputmask интегрируется с нативными событиями DOM.

const input = document.getElementById("phone");

input.addEventListener("complete", () => {
  console.log("Ввод завершён");
});

input.addEventListener("incomplete", () => {
  console.log("Ввод неполный");
});

Событие complete срабатывает при полном заполнении маски, incomplete — при её нарушении.

Маскирование числовых значений

Особое значение имеет работа с числами и валютами.

const numericMask = new Inputmask({
  alias: "numeric",
  digits: 0,
  groupSeparator: ",",
  autoGroup: true
});

numericMask.mask(document.getElementById("count"));

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

Маски с префиксами и суффиксами

Inputmask позволяет добавлять фиксированные элементы вокруг вводимого значения.

const percentMask = new Inputmask({
  alias: "numeric",
  suffix: " %",
  rightAlign: false
});

percentMask.mask(document.getElementById("percent"));

Префиксы и суффиксы не участвуют в значении поля, но влияют на отображение.

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

Библиотека корректно обрабатывает вставку текста из буфера обмена.

const input = document.getElementById("code");

input.addEventListener("paste", (e) => {
  console.log("Вставка значения:", e.clipboardData.getData("text"));
});

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

Программное заполнение значения

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

const input = document.getElementById("phone");

const mask = new Inputmask("+7 (999) 999-99-99");
mask.mask(input);

input.inputmask.setValue("71234567890");

Метод setValue гарантирует корректное форматирование при программной установке.

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

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

const value = input.inputmask.unmaskedvalue();
console.log(value);

Это особенно важно при отправке данных на сервер, где требуется необработанное значение.

Маски с условной логикой

Inputmask поддерживает условное поведение через callback-функции.

const mask = new Inputmask({
  mask: function () {
    return ["999-999", "9999-9999"];
  }
});

mask.mask(document.getElementById("flex"));

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

Поведение при фокусе и blur

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

const mask = new Inputmask({
  mask: "9999-9999",
  showMaskOnHover: false,
  showMaskOnFocus: true
});

mask.mask(document.getElementById("field"));

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

Интеграция с формами

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

const form = document.querySelector("form");

form.addEventListener("submit", (e) => {
  const phone = document.getElementById("phone").inputmask.unmaskedvalue();
  console.log(phone);
});

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

Обработка нескольких масок на одном поле

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

const mask = new Inputmask({
  mask: ["999-9999", "9999-999-999"]
});

mask.mask(document.getElementById("phone"));

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

Ограничение ввода и защита от ошибок

Маска предотвращает ввод недопустимых символов на уровне интерфейса.

const mask = new Inputmask("9999");

mask.mask(document.getElementById("year"));

Любые символы, не соответствующие шаблону, блокируются при вводе.

Совместимость с кастомными обработчиками

Inputmask не конфликтует с нативными событиями при правильной интеграции.

const input = document.getElementById("custom");

input.addEventListener("input", (e) => {
  console.log("Текущее значение:", e.target.value);
});

Библиотека изменяет значение поля, но не блокирует стандартные события DOM.

Гибкость архитектуры Vanilla JavaScript подхода

Использование Inputmask без фреймворков даёт прямой доступ к DOM и жизненному циклу элементов. Это позволяет:

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

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

Оглавление