AutoNumeric — это библиотека для форматирования числовых значений в полях ввода, позволяющая управлять отображением чисел с высокой точностью и гибкостью. Форматирование чисел включает работу с разделителями тысяч, десятичными знаками, валютными символами и процентами, а также обработку отрицательных и специальных значений.
1. Десятичные разделители и дробные знаки
AutoNumeric позволяет задавать количество десятичных знаков и символ
десятичного разделителя через опции decimalPlaces и
decimalCharacter. Это важно для корректного представления
чисел в разных локалях. Например:
decimalPlaces: 2 — фиксирует две цифры после
запятой.decimalCharacter: '.' или ',' — задаёт
символ для десятичного разделителя.При использовании этих параметров библиотека автоматически округляет введённое значение до заданного количества знаков после запятой и обеспечивает корректное отображение при редактировании.
2. Разделители тысяч Для улучшения читаемости
больших чисел применяется символ группировки
(digitGroupSeparator), который по умолчанию равен запятой.
Например, число 1234567.89 при
digitGroupSeparator: ',' будет отображаться как
1,234,567.89.
Поддерживаются следующие настройки:
digitGroupSeparator — символ разделителя тысяч.decimalPlacesShownOnFocus — количество дробных знаков,
показываемое при фокусе на поле.1. Отрицательные значения Параметр
allowNegative контролирует возможность ввода отрицательных
чисел. При allowNegative: true пользователь может вводить
значения с минусом, а библиотека корректно форматирует их при
отображении. Существует также настройка
negativeSignCharacter для изменения символа минуса на
другой символ, если это требуется локализацией или дизайном.
2. Валютные форматы AutoNumeric поддерживает добавление префиксов и суффиксов для чисел, что особенно важно для денежных значений:
currencySymbol — символ валюты (например,
$ или €).currencySymbolPlacement — позиция символа относительно
числа: p (префикс) или s (суффикс).Дополнительно библиотека корректно обрабатывает пробелы между числом и символом валюты, что важно для соответствия стандартам отображения денежных величин в разных странах.
Для полей с процентами используются настройки scale и
suffixText. Например:
scale: 1 автоматически преобразует ввод 50
в 50%.suffixText: '%' добавляет символ процента после
числа.AutoNumeric обеспечивает автоматическое масштабирование и корректное округление значений при работе с процентами, включая ввод и редактирование пользователем.
AutoNumeric позволяет ограничивать диапазон допустимых значений и контролировать ввод:
minimumValue и maximumValue — задают
допустимый диапазон чисел.modifyValueOnWheel — при использовании колёсика мыши
значение может увеличиваться или уменьшаться с заданным шагом.unformatOnSubmit — позволяет отправлять значение формы
в «чистом» виде без форматирования, что удобно для серверной
обработки.Эти параметры гарантируют, что пользовательский ввод всегда остаётся корректным и соответствует требованиям приложения.
Библиотека различает отображение числа при фокусе на поле ввода и в обычном состоянии. Настройки:
showOnlyNumbersOnFocus — при фокусе отображает только
цифры без символов валюты или разделителей.decimalPlacesShownOnFocus — количество видимых
десятичных знаков при редактировании.Такой подход повышает удобство работы с полем, позволяя пользователю вводить данные быстрее и точнее, при этом отображение остаётся читабельным в обычном состоянии.
AutoNumeric поддерживает работу с нулевыми значениями, пустыми полями и автозаполнением:
emptyInputBehavior — определяет поведение при пустом
поле: оставлять пустым, ставить ноль или другое значение.leadingZero — настройка отображения ведущих нулей
(например, для денежных форматов или процентных полей).Эти возможности позволяют адаптировать форматирование под специфические требования интерфейса и бизнес-логики приложения.
Ключевые принципы, на которых строится работа AutoNumeric:
Эти принципы обеспечивают высокую точность, удобство и консистентность отображения числовых данных в веб-приложениях.