negativeBracketsTypeOnBlur

Параметр negativeBracketsTypeOnBlur в библиотеке AutoNumeric управляет тем, как отображается отрицательное число при потере фокуса полем ввода (событие blur). Его основная задача — задать визуальный стиль представления отрицательных значений, когда пользователь завершает редактирование поля.

В отличие от поведения во время ввода, где значение может отображаться в «сыром» виде, режим blur используется для финального форматирования, которое пользователь видит после выхода из поля.

Общая идея поведения отрицательных значений

AutoNumeric поддерживает несколько способов отображения отрицательных чисел:

  • стандартный минус перед числом (-1 234.56)
  • бухгалтерские скобки ((1 234.56))
  • кастомные варианты оформления, зависящие от конфигурации

Параметр negativeBracketsTypeOnBlur отвечает именно за режим скобок в момент потери фокуса.

Суть negativeBracketsTypeOnBlur

negativeBracketsTypeOnBlur определяет:

  • использовать ли скобки для отрицательных чисел при blur
  • какой тип скобок применять
  • как преобразовывать уже отформатированное значение при переходе из режима focus → blur

Важно понимать, что параметр влияет только на отображение, а не на внутреннее числовое значение. Внутренне число всегда хранится в нормализованном виде (например, -1234.56), независимо от выбранного визуального формата.

Возможные значения

В зависимости от версии AutoNumeric и конфигурации, параметр может принимать следующие значения:

null или false

Отключает использование скобок при blur.

Поведение:

  • отрицательные числа отображаются с минусом
  • форматирование не меняется при потере фокуса

Пример:

-1 234.56

'parentheses'

Классический бухгалтерский стиль отображения отрицательных значений.

Поведение:

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

Пример:

(1 234.56)

'brackets'

Использует квадратные скобки вместо круглых.

Пример:

[1 234.56]

'angle'

Использует угловые скобки (реже применяемый формат).

Пример:

<1 234.56>

Поведение при переключении focus / blur

AutoNumeric разделяет режимы отображения:

  • focus (активное редактирование) — пользователь вводит число
  • blur (потеря фокуса) — применяется финальное форматирование

При использовании negativeBracketsTypeOnBlur происходит следующее:

  1. Пользователь вводит отрицательное число:

    -1234.56

  2. Поле теряет фокус

  3. AutoNumeric применяет выбранный стиль:

    • минус заменяется на скобки (если включено)
    • число форматируется согласно локали (разделители тысяч, десятичный символ)

Пример базовой конфигурации

new AutoNumeric('#input', {
    decimalPlaces: 2,
    digitGroupSeparator: ' ',
    decimalCharacter: '.',
    negativeBracketsTypeOnBlur: 'parentheses'
});

Поведение:

  • ввод: -1234.56
  • blur: (1 234.56)

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

negativeBracketsTypeOnBlur часто используется вместе с параметром:

  • negativePositiveSignPlacement

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

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

Влияние на форматы локализации

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

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

Пример:

{
    digitGroupSeparator: '.',
    decimalCharacter: ',',
    negativeBracketsTypeOnBlur: 'brackets'
}

Результат:

[1.234,56]

Поведение при программном изменении значения

Если значение задается программно:

anElement.set(-5000);

AutoNumeric применяет тот же принцип:

  • внутренне хранится -5000
  • при blur отображается согласно negativeBracketsTypeOnBlur

Если элемент находится в blur-состоянии, формат применяется сразу. Если в focus — форматирование откладывается до потери фокуса.

Совместимость с currencySymbol

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

{
    currencySymbol: '$',
    currencySymbolPlacement: 'p',
    negativeBracketsTypeOnBlur: 'parentheses'
}

Результат:

($1 234.56)

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

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

Ограничения и особенности реализации

1. Только визуальное влияние

Параметр не изменяет:

  • реальное числовое значение
  • результаты вычислений
  • значение, возвращаемое getNumber()

2. Не влияет на focus

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

3. Приоритет форматирования

Если одновременно заданы:

  • отрицательный знак
  • скобки

приоритет отдается скобкам при blur.

Поведение при очистке значения

Если поле очищается:

anElement.set('');

или значение становится пустым, negativeBracketsTypeOnBlur не применяется, так как отсутствует числовая сущность для форматирования.

Сценарии использования

Финансовые интерфейсы

Наиболее частый сценарий — бухгалтерские и финансовые системы:

  • отчеты
  • балансы
  • P&L таблицы

Скобочная нотация считается стандартом для отображения убытков.

UI таблицы с редактированием

При использовании inline-editing:

  • focus: удобный ввод минуса
  • blur: визуально аккуратные скобки

Локализованные интерфейсы

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

Комбинация с другими параметрами форматирования

negativeBracketsTypeOnBlur часто работает в связке с:

  • decimalPlaces
  • digitGroupSeparator
  • decimalCharacter
  • showPositiveSign
  • currencySymbol
  • currencySymbolPlacement

Итоговый вывод всегда является результатом последовательного применения всех правил форматирования, где скобки накладываются последним шагом при blur.

Типичные ошибки при использовании

Ожидание изменения внутреннего значения

Распространенное заблуждение — ожидание, что скобки влияют на число. На самом деле:

  • (1 000) == -1000 в памяти

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

При попытке вручную форматировать значение через onChange можно получить двойное форматирование, если не учитывать автоматическое применение скобок на blur.

Несогласованность UX

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

Оглавление