Переход между версиями

Переход между версиями Inputmask связан с переработкой внутренней архитектуры, упрощением публичного API и устранением накопленных в ранних версиях несогласованностей. Основной вектор изменений направлен на унификацию поведения, уменьшение количества неявных побочных эффектов и повышение предсказуемости работы масок в различных окружениях (браузер, фреймворки, SSR).

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

Общая стратегия миграции

При переносе кода между версиями Inputmask основное внимание сосредотачивается на трех слоях:

  • инициализация экземпляра маски;
  • формат описания маски и опций;
  • обработка событий и интеграция с DOM.

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

Переход от старых версий характеризуется следующими системными изменениями:

  • отказ от неявных глобальных конфигураций;
  • переход к явному созданию экземпляра маски;
  • переработка механизма определения placeholder и auto-unmask;
  • изменение поведения событий ввода при программном изменении значения.

Изменения в способе инициализации

Ранние версии Inputmask допускали инициализацию через глобальный вызов с передачей строки маски и опций в свободной форме. В новых версиях используется единый конструктор с конфигурационным объектом.

Старый подход:

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

Современный подход:

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

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

Изменение структуры конфигурации

Конфигурационный объект Inputmask в новых версиях был приведён к более строгой типизации.

Изменения включают:

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

Пример изменения структуры:

Было:

Inputmask({
  mask: "999-999",
  placeholder: "_",
  greedy: false,
  autoUnmask: true
});

Стало:

new Inputmask({
  mask: "999-999",
  placeholder: "_",
  greedy: false,
  autoUnmask: true
});

Хотя синтаксис кажется схожим, внутренняя обработка параметров стала более строгой: опции больше не могут наследоваться неявно из глобального состояния.

Переименование и унификация опций

В процессе развития Inputmask часть параметров была переименована или объединена.

Типичные изменения:

  • mask остаётся неизменным, но расширяется поддержка массивов и функций;
  • placeholder становится более строго привязанным к маске;
  • autoUnmask и removeMaskOnSubmit разделяются по зонам ответственности;
  • логика greedy пересматривается для согласованного поведения в динамических масках.

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

Изменение модели событий

Система событий Inputmask подверглась значительной переработке.

Основные изменения:

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

Старые версии позволяли использовать множество неформализованных событий, зависящих от реализации браузера. Новая модель опирается на явный набор событий:

  • oncomplete
  • onincomplete
  • oncleared
  • onKeyValidation

Пример изменения обработки:

new Inputmask({
  mask: "999-999",
  oncomplete: function () {
    console.log("complete");
  }
});

Изменение заключается в том, что события больше не навешиваются через DOM напрямую, а привязываются к экземпляру маски.

DOM-интеграция и привязка к элементам

В старых версиях Inputmask маска могла автоматически применяться через глобальный селектор или jQuery-плагин. В новых версиях приоритет отдан явной привязке.

Изменения:

  • отказ от глобального автоприменения;
  • исключение скрытых мутаций DOM;
  • явный вызов метода .mask().

Пример:

const im = new Inputmask({ mask: "9999-9999" });
im.mask(document.querySelector("input"));

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

Удалённые и устаревшие возможности

В процессе развития Inputmask были исключены или объявлены устаревшими следующие возможности:

  • неявные глобальные настройки через window-объект;
  • автоматическое определение маски по DOM-атрибутам без явной инициализации;
  • часть legacy-совместимости с ранними jQuery-обёртками;
  • устаревшие форматы масок с неоднозначной интерпретацией символов.

Удаление этих возможностей связано с устранением неоднозначного поведения при работе в современных сборщиках и фреймворках.

Изменения в работе с динамическими масками

Динамические маски в Inputmask стали более детерминированными.

Основные изменения:

  • пересчёт маски выполняется через единый алгоритм;
  • убраны побочные эффекты при частичном вводе;
  • изменена логика переключения шаблонов.

Пример:

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

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

Совместимость и полифиллы

Современные версии Inputmask минимизируют зависимость от внешних полифиллов.

Изменения:

  • отказ от встроенных shim-решений;
  • делегирование совместимости окружению;
  • сокращение поддержки устаревших браузеров.

Это влияет на поведение в старых средах: часть функциональности теперь требует явной настройки сборки.

Типовые сценарии миграции кода

Сравнение старого и нового подхода в Inputmask:

1. Простая маска

Было:

Inputmask("999-999").mask(input);

Стало:

new Inputmask({ mask: "999-999" }).mask(input);

2. Маска с событиями

Было:

Inputmask("999-999").mask(input);
input.addEventListener("complete", handler);

Стало:

new Inputmask({
  mask: "999-999",
  oncomplete: handler
}).mask(input);

3. Множественные элементы

Было:

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

Стало:

const im = new Inputmask({ mask: "999-999" });
document.querySelectorAll("input").forEach(el => im.mask(el));

Типовые проблемы при переходе между версиями

При миграции Inputmask часто возникают следующие ситуации:

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

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

Оглавление