Первая маска: простой пример

Подключение библиотеки Inputmask выполняется через подключение готового скрипта или установку через пакетный менеджер. В случае использования CDN достаточно добавить файл библиотеки перед основным кодом приложения:

<script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/inputmask.min.js"></script>

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

npm install inputmask

Далее библиотека импортируется в модуль:

import Inputmask from "inputmask";

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

Простейшая маска применяется к HTML-элементу input и определяет формат вводимых данных.

Создание первой маски

Наиболее распространённый пример — телефонный номер фиксированного формата. Поле ввода должно принимать только цифры в заданной структуре:

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

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

В данном шаблоне используются следующие элементы:

  • +7 — фиксированный префикс, который всегда остаётся неизменным
  • 9 — символ, обозначающий обязательную цифру
  • скобки, пробелы и дефисы — статические разделители

Каждое появление 9 означает, что в этом месте допускается ввод только числового символа.

Поведение маски при вводе

При активации маски поле ввода начинает обрабатывать каждый введённый символ. Алгоритм работы включает:

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

При вводе первых цифр маска автоматически формирует строку вида:

+7 (123) 456-78-90

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

Инициализация через конфигурационный объект

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

Inputmask({
  mask: "+7 (999) 999-99-99"
}).mask(phoneInput);

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

Маска как повторно используемый шаблон

Один и тот же шаблон может применяться к нескольким элементам интерфейса. Это позволяет стандартизировать ввод данных в разных частях приложения:

const elements = document.querySelectorAll(".phone");

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

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

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

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

  • 9 — обязательная цифра
  • a — обязательная буква
  • * — любой символ (буква или цифра)
  • статические символы — фиксированные элементы строки

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

Inputmask("aaa-999").mask(document.getElementById("code"));

Такая маска требует ввод трёх букв, дефиса и трёх цифр.

Очистка и поведение пустого значения

При отсутствии введённых данных поле остаётся пустым или содержит маску-плейсхолдер в зависимости от настроек. Базовое поведение предполагает отсутствие сохранения незаполненных символов.

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

Обработка вставки данных

При вставке строки из буфера обмена библиотека автоматически пытается привести значение к заданному шаблону. Например, при вставке номера без форматирования:

71234567890

результат преобразуется в:

+7 (123) 456-78-90

Если вставляемая строка содержит недопустимые символы, они игнорируются в соответствии с правилами маски.

Простейшая настройка поведения очистки

Базовый режим работы может быть расширен через параметры, управляющие очисткой введённых данных. Один из ключевых параметров — сохранение или удаление маски при получении значения из input:

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

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

Работа с несколькими масками

Хотя в простом примере используется один шаблон, библиотека поддерживает набор альтернативных масок. Это позволяет одному полю принимать несколько форматов:

Inputmask({
  mask: ["+7 (999) 999-99-99", "+7 999 999 9999"]
}).mask(phoneInput);

При вводе данных система автоматически подбирает подходящий формат.

Взаимодействие с DOM-событиями

Маска интегрируется с базовыми событиями браузера:

  • input — обработка каждого изменения
  • focus — активация маски
  • blur — финальная проверка значения
  • paste — обработка вставки

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

Минимальный рабочий пример

Полный минимальный сценарий использования маски включает HTML и Jav * aScript:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Inputmask пример</title>
  <script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/inputmask.min.js"></script>
</head>
<body>

<input id="phone" type="text" />

<script>
  const phoneInput = document.getElementById("phone");

  Inputmask("+7 (999) 999-99-99").mask(phoneInput);
</script>

</body>
</html>

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

Оглавление