Изменение маски на лету

Библиотека Inputmask предоставляет механизм изменения поведения маски без пересоздания DOM-элемента, через доступ к экземпляру маски, привязанному к полю ввода. После инициализации:

const element = document.querySelector("#phone");

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

к элементу добавляется объект управления:

element.inputmask

Именно этот объект становится точкой входа для изменения конфигурации «на лету».

Изменение параметров через .option()

Наиболее прямой способ обновления поведения маски — метод option, позволяющий модифицировать уже активную маску без повторной инициализации.

element.inputmask.option({
  placeholder: "_",
  showMaskOnHover: false,
  showMaskOnFocus: true
});

При этом Inputmask не пересоздаёт инстанс, а перестраивает внутренние обработчики и отображение в соответствии с новыми настройками.

Ключевые особенности:

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

Переключение самой маски через .setValue() и maskset

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

element.inputmask.remove();

const im = new Inputmask("(999) 999-9999");
im.mask(element);

Этот подход полностью пересоздаёт mask engine и применяется в сценариях, где структура маски кардинально меняется.

Использование .setOptions() для замены конфигурации

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

element.inputmask.setOptions({
  mask: "9999-9999-9999-9999",
  clearIncomplete: true
});

Особенность метода заключается в том, что он может затрагивать как поведение, так и структуру маски. Внутренне происходит перерасчёт maskset без необходимости полного удаления экземпляра.

Изменение маски через повторный вызов .mask()

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

element.inputmask.remove();

Inputmask({
  mask: "+49 999 999999",
  placeholder: "_"
}).mask(element);

Такой подход используется, когда:

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

Динамическая маска через функцию mask

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

Inputmask({
  mask: function () {
    return isInternational ? "+999 999 999999" : "+7 (999) 999-99-99";
  }
}).mask(element);

Функция вызывается при инициализации и может использоваться совместно с пересчётом маски через события.

Привязка изменения маски к событиям

На практике изменение маски часто происходит в ответ на действия пользователя:

const phone = document.querySelector("#phone");
const country = document.querySelector("#country");

function applyMask(value) {
  phone.inputmask.remove();

  const mask = value === "kz"
    ? "+7 (999) 999-99-99"
    : "+1 (999) 999-9999";

  Inputmask({ mask }).mask(phone);
}

country.addEventListener("change", (e) => {
  applyMask(e.target.value);
});

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

Изменение alias вместо явной маски

Inputmask поддерживает именованные алиасы, которые можно переключать динамически:

Inputmask("datetime", {
  inputFormat: "dd.mm.yyyy"
}).mask(element);

Смена alias осуществляется через пересоздание маски:

element.inputmask.remove();

Inputmask("numeric", {
  rightAlign: false
}).mask(element);

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

Обновление маски без потери введённых данных

Одной из ключевых задач при динамической смене является сохранение уже введённого значения. Inputmask предоставляет механизм переноса значения через повторную инициализацию:

const currentValue = element.value;

element.inputmask.remove();

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

element.inputmask.setValue(currentValue);

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

Использование onBeforeMask для адаптации данных при смене маски

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

Inputmask({
  mask: "+7 (999) 999-99-99",
  onBeforeMask: function (value) {
    return value.replace(/\D/g, "");
  }
}).mask(element);

При повторной инициализации этот callback позволяет привести старое значение к новому формату перед отрисовкой.

Управление состоянием через .maskset и внутренние структуры

Внутренний объект maskset хранит текущее состояние маски и может быть использован для продвинутого управления:

console.log(element.inputmask.maskset);

Хотя прямое изменение не рекомендуется, он используется для:

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

Комбинирование нескольких стратегий изменения маски

В сложных формах часто применяется гибридный подход:

function updatePhoneMask(region) {
  const im = element.inputmask;

  if (region === "eu") {
    im.setOptions({ mask: "+49 999 999999" });
  } else if (region === "us") {
    im.remove();
    Inputmask({ mask: "+1 (999) 999-9999" }).mask(element);
  } else {
    im.option({ placeholder: "_" });
  }
}

Такое разделение обусловлено тем, что разные типы масок по-разному реагируют на частичное обновление конфигурации.

Синхронизация маски с внешними данными формы

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

const typeField = document.querySelector("#type");
const input = document.querySelector("#value");

typeField.addEventListener("change", () => {
  input.inputmask.remove();

  const config = typeField.value === "email"
    ? { mask: "*{1,20}@*{1,10}.com" }
    : { mask: "999-999-9999" };

  Inputmask(config).mask(input);
});

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

Поведение курсора и пересчёт позиции при смене маски

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

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

Пример:

element.inputmask.option({
  keepStatic: true
});

Параметр keepStatic влияет на стабильность структуры маски при частичных изменениях.

Динамическая смена с использованием regex масок

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

Inputmask({
  regex: "\\d+"
}).mask(element);

Смена логики:

element.inputmask.remove();

Inputmask({
  regex: "[A-Za-z]+"
}).mask(element);

Такой способ часто применяется при переключении между числовым и текстовым вводом.

Оглавление