Библиотека AutoNumeric предоставляет механизм, позволяющий изменять форматирование числового значения в поле ввода без необходимости пересоздания экземпляра. Это особенно важно в интерфейсах, где требования к отображению данных могут меняться в зависимости от контекста: валюты, режима отображения, локали или уровня точности. Динамическое изменение формата реализуется через обновление конфигурации экземпляра и повторную инициализацию внутренних параметров форматирования.
Каждый экземпляр AutoNumeric создаётся на основе набора опций, определяющих правила форматирования: разделители, количество знаков после запятой, символ валюты, правила округления и другие параметры. После инициализации эти параметры не являются статичными — они могут быть изменены через API библиотеки.
Основной механизм изменения формата связан с обновлением конфигурации:
При этом ключевым требованием остаётся сохранение числовой сущности значения, независимо от внешнего представления.
Центральным инструментом динамического изменения формата является
метод updateSettings. Он позволяет модифицировать текущие
параметры экземпляра без разрушения привязки к DOM-элементу.
const anElement = new AutoNumeric('#price', {
decimalPlaces: 2,
digitGroupSeparator: ',',
decimalCharacter: '.',
currencySymbol: '$ ',
currencySymbolPlacement: 'p'
});
// изменение формата
anElement.updateSettings({
currencySymbol: '€ ',
decimalPlaces: 3
});После вызова updateSettings происходит:
Важно учитывать, что изменение параметров влияет только на визуальное представление, но не на raw value.
AutoNumeric поддерживает частичное обновление конфигурации. Это означает, что не требуется передавать полный объект настроек — достаточно указать только изменяемые параметры.
Типичный сценарий — переключение режима отображения:
anElement.updateSettings({
decimalPlaces: 0
});В результате:
Такой подход снижает риск побочных эффектов, связанных с полной переинициализацией экземпляра.
Динамическое форматирование часто используется для адаптации поля ввода к состоянию приложения. Типичные сценарии включают переключение между режимами:
Пример переключения между режимами:
function setCompactMode(anElement) {
anElement.updateSettings({
decimalPlaces: 0,
digitGroupSeparator: ' '
});
}
function setDetailedMode(anElement) {
anElement.updateSettings({
decimalPlaces: 4,
digitGroupSeparator: ','
});
}При таком подходе значение остаётся неизменным, но его представление адаптируется под контекст использования.
Одним из наиболее распространённых сценариев динамического изменения формата является переключение валют. AutoNumeric позволяет изменять символ валюты и его расположение без потери данных.
anElement.updateSettings({
currencySymbol: '₸ ',
currencySymbolPlacement: 'p'
});После обновления:
При переключении валют важно учитывать различие в стандартах округления и допустимом количестве знаков после запятой.
Количество знаков после запятой — один из наиболее чувствительных параметров форматирования. Его изменение требует перерасчёта отображаемого значения с учётом выбранной стратегии округления.
anElement.updateSettings({
decimalPlaces: 2,
roundingMethod: 'S' // стандартное округление
});При увеличении точности может происходить:
При уменьшении точности:
Изменение формата во время активного ввода требует аккуратного управления состоянием поля. AutoNumeric автоматически синхронизирует внутренние данные, но поведение зависит от фокуса и текущей позиции курсора.
При обновлении настроек во время редактирования:
Пример сценария:
input.addEventListener('focus', () => {
anElement.updateSettings({
decimalPlaces: 4
});
});Такая логика используется для расширения точности во время редактирования и упрощения отображения в режиме покоя.
AutoNumeric не является полноценной i18n-библиотекой, однако поддерживает базовые параметры локализации через разделители и символы. Это позволяет эмулировать разные региональные форматы.
anElement.updateSettings({
digitGroupSeparator: '.',
decimalCharacter: ','
});При смене локали необходимо одновременно изменять:
Несмотря на гибкость, динамическое изменение формата имеет ряд ограничений, связанных с внутренней архитектурой библиотеки:
updateSettings могут приводить к лишним
перерасчётам;Особенно чувствительными являются параметры, связанные с округлением и количеством знаков после запятой, так как они напрямую влияют на числовую точность отображения.
В интерфейсах с высокой интерактивностью часто используется переключение формата в зависимости от пользовательских действий. Типичный пример — таблицы с финансовыми данными, где значения отображаются кратко, но раскрываются при фокусе или наведении.
element.addEventListener('mouseenter', () => {
anElement.updateSettings({
decimalPlaces: 4
});
});
element.addEventListener('mouseleave', () => {
anElement.updateSettings({
decimalPlaces: 2
});
});Такой подход позволяет совмещать компактность интерфейса и точность данных без создания дополнительных элементов отображения.
При интенсивном использовании динамического форматирования важно учитывать производительность. Рекомендуется:
updateSettings;Каждый вызов обновления может инициировать перерасчёт и перерисовку значения, что при массовых операциях влияет на производительность интерфейса.
При обновлении конфигурации возможны конфликты между параметрами. Например, несовместимость символа валюты и позиции десятичного разделителя или несоответствие количества знаков после запятой стратегии округления.
AutoNumeric в таких случаях применяет внутренние правила приоритизации:
Это обеспечивает устойчивость поведения даже при частых и неполных обновлениях конфигурации.