greedy режим

Поведение маски в Inputmask при работе с повторяющимися или необязательными сегментами определяется параметром greedy. Этот режим управляет тем, насколько «жадно» маска занимает доступное пространство ввода, а также как распределяются необязательные позиции внутри шаблона.

В основе механизма лежит баланс между фиксированной структурой маски и динамическим расширением шаблона в зависимости от введённых данных.

Базовая логика greedy

Параметр greedy влияет на то, как Inputmask интерпретирует повторяющиеся элементы и необязательные символы:

  • greedy: true — маска стремится занять максимально возможное количество позиций заранее
  • greedy: false — маска занимает минимально необходимое пространство и расширяется по мере ввода

Поведение особенно заметно при использовании:

  • повторяющихся токенов (9, a, *)
  • групп с необязательными символами
  • динамических масок с repeat

Поведение при greedy: true

При включённом greedy-режиме Inputmask заранее «разворачивает» маску до максимальной длины. Это означает, что поле ввода визуально выглядит заполненным шаблоном даже до начала ввода.

Пример:

Inputmask({
  mask: "999-999-9999",
  greedy: true
}).mask("#phone");

В этом случае:

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

Greedy-режим полезен, когда важна строгая форма представления данных, например:

  • телефонные номера
  • коды
  • фиксированные идентификаторы

Поведение при greedy: false

При выключенном greedy Inputmask минимизирует начальную длину маски и расширяет её только при необходимости.

Inputmask({
  mask: "999-999-9999",
  greedy: false
}).mask("#phone");

Особенности:

  • часть маски может быть «не проявлена» до ввода
  • визуально поле выглядит более компактным
  • дополнительные сегменты активируются по мере заполнения

Такой режим особенно заметен при масках с повторениями:

Inputmask({
  mask: "9{1,10}",
  greedy: false
}).mask("#code");

Здесь количество допустимых цифр расширяется динамически.

Влияние на повторяющиеся сегменты

Наиболее выраженное различие greedy/нен greedy проявляется при использовании повторов.

Повтор фиксированного диапазона

mask: "9{3,6}"
  • greedy: true — сразу выделяются 6 позиций
  • greedy: false — отображаются минимальные 3 позиции, расширение происходит при вводе

Повтор неопределённой длины

mask: "9{+}"

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

  • greedy: true — Inputmask старается сразу отрисовать максимально возможное пространство
  • greedy: false — длина растёт по мере ввода

Поведение с optional blocks

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

mask: "(999) 999-9999[9][9]"

В этом случае:

  • greedy: true — необязательные сегменты могут визуально резервироваться заранее
  • greedy: false — они появляются только при необходимости

Разница заметна при заполнении телефонных форматов с расширением номера.

Взаимодействие с placeholder

Placeholder в Inputmask тесно связан с greedy-режимом, поскольку именно он заполняет «пустые» позиции.

Inputmask({
  mask: "999-999",
  placeholder: "_",
  greedy: true
}).mask("#field");

Поведение:

  • при greedy: true placeholder полностью заполняет всю маску
  • при greedy: false placeholder ограничен текущей активной частью

Это влияет на восприятие пользователем доступного пространства ввода.

Greedy и маски с альтернативами

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

mask: "999|aaa"

или через alias-конфигурации с несколькими вариантами формата.

В greedy-режиме:

  • Inputmask старается заранее определить максимальный вариант
  • может резервироваться более длинный сегмент

В non-greedy:

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

Поведение с numeric alias

В числовых масках greedy влияет на визуальное распределение разрядов:

Inputmask("decimal", {
  digits: 2,
  greedy: true
}).mask("#price");

Особенности:

  • заранее фиксируется структура дробной и целой части
  • разделители и позиции отображаются сразу

При greedy: false структура формируется по мере ввода числа, особенно заметно при увеличении целой части.

Маски с автодополнением длины

Greedy играет ключевую роль при автогенерации длины:

Inputmask({
  mask: "9",
  repeat: 10,
  greedy: true
}).mask("#serial");

В этом случае:

  • greedy: true — сразу отображаются все 10 позиций
  • greedy: false — поле растёт от одной позиции к десяти

Влияние на UX и внутренний механизм

На уровне движка Inputmask greedy влияет на:

  • предварительное построение маски
  • количество активных input-сегментов
  • поведение caret (курсора)
  • вычисление доступной длины ввода

При greedy: true структура становится статичной, что уменьшает количество перестроений DOM-логики. При greedy: false увеличивается количество динамических операций при каждом вводе символа.

Сочетание с другими параметрами

Greedy не работает изолированно и часто комбинируется с:

  • autoUnmask — влияет на извлечение значения без маски
  • clearIncomplete — определяет поведение при неполном вводе
  • showMaskOnHover — визуализация пустых позиций
  • skipOptionalPartCharacter — обработка необязательных сегментов

Пример комплексной конфигурации:

Inputmask({
  mask: "999-9999[9]",
  greedy: false,
  clearIncomplete: true,
  showMaskOnHover: false
}).mask("#input");

Здесь greedy определяет базовую стратегию построения структуры, а остальные параметры регулируют поведение поверх неё.

Типичные различия в отладке

При диагностике поведения масок greedy режим проявляется в следующих признаках:

  • различная длина input.value до ввода
  • различное количество placeholder-символов
  • отличия в реакции на backspace при пустых позициях
  • разная активация optional blocks

Greedy: true обычно даёт стабильную, предсказуемую структуру, тогда как greedy: false приводит к более «живому» и адаптивному поведению маски.

Оглавление