Работа с jQuery

Интеграция Inputmask с jQuery строится вокруг идеи расширения стандартного jQuery-API через плагинный слой, позволяющий применять маски ввода к наборам DOM-элементов так же естественно, как любые другие jQuery-методы. Подход сохраняет цепочки вызовов, поддерживает коллекции элементов и обеспечивает единообразное поведение на уровне всей страницы.

Работа начинается с корректного подключения скриптов. В классической сборке порядок критичен: сначала jQuery, затем Inputmask и его jQuery-адаптер.

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

После подключения в объекте jQuery появляется метод inputmask, через который выполняется инициализация масок на выбранных элементах.

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

В jQuery-режиме маска применяется ко всем элементам коллекции:

$(document).ready(function () {
  $("input").inputmask("99-99-9999");
});

Строковый аргумент интерпретируется как шаблон маски. В данном случае задаётся формат даты в виде день-месяц-год. Каждый символ 9 означает обязательную цифру.

Более сложный пример с телефонным номером:

$("#phone").inputmask("+7 (999) 999-99-99");

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

Вместо строки можно передавать объект настроек, что открывает доступ ко всем возможностям Inputmask:

$("#phone").inputmask({
  mask: "+7 (999) 999-99-99",
  placeholder: "_",
  showMaskOnHover: false,
  showMaskOnFocus: true
});

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

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

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

Инициализация через data-атрибуты

jQuery совместно с Inputmask поддерживает декларативное определение масок через HTML:

<input type="text" data-inputmask="'mask': '9999-9999-9999-9999'">

Инициализация выполняется одной строкой:

$(document).ready(function () {
  $(":input").inputmask();
});

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

Работа с alias-форматами

Inputmask поддерживает предустановленные алиасы, которые упрощают конфигурацию сложных форматов:

$("#date").inputmask("datetime", {
  inputFormat: "dd/mm/yyyy"
});

Другой пример — числовые форматы:

$("#price").inputmask("numeric", {
  groupSeparator: " ",
  digits: 2,
  digitsOptional: false
});

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

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

jQuery-коллекции позволяют применять одну конфигурацию сразу к множеству полей:

$(".phone-input").inputmask({
  mask: "+7 (999) 999-99-99"
});

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

Динамическое изменение маски

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

$("#phone").inputmask("remove");

$("#phone").inputmask({
  mask: "+1 (999) 999-9999"
});

Метод remove отключает текущую маску и возвращает элемент к стандартному поведению ввода. После этого можно применить новую конфигурацию.

Также доступна модификация без полного удаления:

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

Получение и работа с «чистым» значением

Одной из ключевых особенностей Inputmask является разделение отображаемого и реального значения.

let value = $("#phone").inputmask("unmaskedvalue");

Метод возвращает данные без форматирования, что критично для отправки на сервер или дальнейшей обработки.

Запись значения также поддерживает маску:

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

События jQuery-интеграции

Плагин генерирует события, которые удобно использовать в цепочке jQuery:

$("#phone").on("complete", function () {
  console.log("Ввод завершён");
});

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

  • complete — маска заполнена полностью
  • incomplete — введены не все обязательные символы
  • cleared — поле очищено

Эти события позволяют строить валидацию без дополнительного кода.

Работа с вставкой и буфером обмена

Поведение при вставке данных можно контролировать через конфигурацию:

$("#phone").inputmask({
  mask: "9999-9999",
  onBeforePaste: function (pastedValue) {
    return pastedValue.replace(/\D/g, "");
  }
});

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

Программное управление через jQuery API

Inputmask расширяет jQuery-цепочку методами управления:

$("#phone").inputmask("focus");
$("#phone").inputmask("blur");
$("#phone").inputmask("isComplete");

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

Снятие маски и очистка

Полное отключение маски выполняется так:

$("#phone").inputmask("remove");

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

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

$("#phone").val("");

Взаимодействие с динамическим DOM

При работе с динамически добавляемыми элементами важно повторно инициализировать маски:

$(document).on("focus", ".dynamic-phone", function () {
  $(this).inputmask("+7 (999) 999-99-99");
});

Такой подход обеспечивает корректную работу в SPA и интерфейсах с частичной перерисовкой DOM.

Особенности цепочек jQuery

Метод inputmask возвращает jQuery-объект, что позволяет строить цепочки вызовов:

$("#phone")
  .inputmask("+7 (999) 999-99-99")
  .addClass("masked")
  .prop("autocomplete", "off");

Это сохраняет консистентность с философией jQuery и позволяет включать маскирование в существующие пайплайны DOM-манипуляций.

Оглавление