Скобки для отрицательных значений

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

Настройка отображения отрицательных чисел в скобках

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

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

new AutoNumeric('#element', {
    negativeBrackets: true
});

В этом примере значение, которое будет введено в поле с идентификатором #element, при отрицательности отобразится в скобках, например: (100) вместо -100.

Работа с параметрами форматирования для отрицательных чисел

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

  1. negativeBrackets: true При установке в true все отрицательные числа будут отображаться в круглых скобках, без изменений в самом значении. Например, число -500 отобразится как (500).

  2. negativeBrackets: false Если эта опция установлена в false (по умолчанию), то отрицательные значения отображаются с минусом перед числом, как это принято в большинстве случаев. В таком случае -500 будет отображаться как -500.

  3. negativeBrackets: ‘[’ и ’]’“ Это позволяет использовать квадратные скобки для отображения отрицательных чисел. Например, число -500 будет отображаться как [500], а не (500).

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

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

Пример:

new AutoNumeric('#element', {
    negativeBrackets: true,
    decimalPlaces: 2,
    digitGroupSeparator: ',',
    decimalCharacter: '.'
});

В этом примере числа будут отображаться с двумя знаками после запятой, с запятой в качестве разделителя тысяч и точкой в качестве десятичного разделителя. Для отрицательных значений, например, -1,234.56, отображение будет следующим: (1,234.56).

Применение формата для всех полей

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

const elements = document.querySelectorAll('.numeric-field');
elements.forEach(element => {
    new AutoNumeric(element, {
        negativeBrackets: true,
        decimalPlaces: 2,
        digitGroupSeparator: ','
    });
});

Этот код применит форматирование для всех элементов с классом numeric-field. Отрицательные числа в таких полях будут отображаться в скобках, как указано в конфигурации.

Персонализированные скобки

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

Пример использования:

new AutoNumeric('#element', {
    negativeBrackets: true,
    negativeBracketsType: '[]'
});

В результате этого кода отрицательное число будет отображаться в квадратных скобках, например, [500].

Примеры в различных валютных форматах

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

new AutoNumeric('#element', {
    negativeBrackets: true,
    currencySymbol: '$',
    currencySymbolPlacement: 'p',
    decimalPlaces: 2,
    digitGroupSeparator: ',',
    decimalCharacter: '.'
});

Здесь, если введено отрицательное число, например, -1234.56, оно будет отображаться как ($1,234.56). Это может быть полезно для финансовых отчетов, где такие представления являются стандартом.

Реакция на изменения значения

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

Пример:

const inputField = new AutoNumeric('#element', {
    negativeBrackets: true
});

// После изменения значения:
inputField.set(12345); // 12,345
inputField.set(-12345); // (12,345)

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

Заключение

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

Оглавление