insertMode и overwriteMode

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

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

Базовая модель поведения insertMode

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

  • символ добавляется в позицию курсора;
  • последующие символы сдвигаются вправо;
  • структура маски сохраняется, но содержимое перераспределяется;
  • позиция курсора смещается на одну позицию вперёд.

Пример логики:

Маска:  99-99
Ввод:   12-34
Курсор после "1": 1|2-34
Ввод "9": 19|2-34 → 192-34

Такое поведение характерно для текстовых редакторов и обеспечивает сохранение ранее введённых данных при частичном редактировании.

Влияние на заполненные поля

При частично заполненной маске insertMode позволяет:

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

Однако в сложных масках с фиксированными разделителями (дата, телефон) вставка может приводить к активному перерасчёту позиций.

Поведение курсора

Курсор в режиме вставки ведёт себя предсказуемо:

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

overwriteMode: режим перезаписи символов

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

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

Базовое поведение overwriteMode

При overwriteMode: true ввод символа приводит к следующему:

  • символ на текущей позиции курсора заменяется новым;
  • последующие символы не сдвигаются;
  • длина строки остаётся неизменной;
  • курсор перемещается на следующую позицию.

Пример:

Маска:  99-99
Значение: 12-34
Ввод "9" на позиции 1:
19-34

Здесь символ 2 заменяется на 9, а структура маски сохраняется без сдвигов.

Поведение в заполненных и частично заполненных полях

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

  • упрощает точечное редактирование цифр;
  • предотвращает «разъезд» структуры маски;
  • сохраняет фиксированную длину ввода;
  • полезен для полей с жёстким форматом (PIN, коды, фиксированные номера).

Сравнение insertMode и overwriteMode

Оба режима управляют поведением ввода, но базируются на разных моделях редактирования текста.

insertMode (вставка)

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

overwriteMode (перезапись)

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

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

В конфигурации Inputmask оба режима могут пересекаться, но логика обработки строится с приоритетом overwriteMode.

Типичная модель:

  • если активен overwriteMode, вставка отключается логически;
  • insertMode становится вторичным или игнорируется;
  • при выключенном overwriteMode используется insertMode.

Таким образом:

overwriteMode = true  → режим перезаписи
overwriteMode = false → режим вставки (insertMode управляет поведением)

Влияние на обработку маски

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

При insertMode:

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

При overwriteMode:

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

Примеры конфигурации

Inputmask("99-99", {
  insertMode: true
}).mask("#field");

Поведение: вставка символов со сдвигом строки.

Inputmask("99-99", {
  overwriteMode: true
}).mask("#field");

Поведение: замена символов на текущей позиции курсора.

Inputmask("99-99", {
  insertMode: false,
  overwriteMode: true
}).mask("#field");

Конфигурация с явным приоритетом перезаписи, где insertMode фактически не участвует в логике ввода.

Сценарии применения режимов

insertMode

Используется в случаях:

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

overwriteMode

Используется в случаях:

  • PIN-коды;
  • одноразовые коды подтверждения;
  • серийные номера фиксированной длины;
  • интерфейсы с табличным или ячейковым вводом.

Особенности обработки удаления

Удаление символов по-разному взаимодействует с режимами:

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

Влияние на UX поведения поля ввода

Разница между режимами проявляется в восприятии интерфейса:

  • insertMode создаёт ощущение «редактора текста»;
  • overwriteMode создаёт ощущение «заполнения ячеек».

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

Оглавление