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

После создания экземпляра AutoNumeric значение поля можно изменять программно без участия пользователя. Библиотека автоматически применяет форматирование, проверяет ограничения диапазона и обновляет отображение в DOM.

Базовый пример:

<input id="price">
const an = new AutoNumeric('#price', {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    decimalPlaces: 2,
    currencySymbol: '₸ '
});

an.set(125000.5);

Результат в поле:

₸ 125 000,50

Метод set() является основным способом программной установки значения.

Метод set()

Синтаксис

an.set(value);

Поддерживаемые типы

Метод принимает:

  • числа;
  • строки;
  • значения с десятичной частью;
  • отрицательные значения;
  • строки с форматированием.

Примеры:

an.set(1500);
an.set(99.95);
an.set('-1200.75');
an.set('250000');

Автоматическое форматирование

При установке значения библиотека автоматически:

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

Пример:

const an = new AutoNumeric('#salary', {
    digitGroupSeparator: '.',
    decimalCharacter: ',',
    decimalPlaces: 2,
    currencySymbol: '€ '
});

an.set(1234567.8);

Результат:

€ 1.234.567,80

Установка строковых значений

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

an.set('45000');

Также поддерживаются отрицательные значения:

an.set('-1250.90');

Поведение при некорректных данных

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

Пример проблемных значений:

an.set('abc');
an.set(undefined);
an.set(null);

Наиболее частые результаты:

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

Поэтому рекомендуется предварительная проверка:

const value = Number(data);

if (!Number.isNaN(value)) {
    an.set(value);
}

Изменение значения после AJAX-запроса

Один из самых распространённых сценариев — загрузка данных с сервера.

fetch('/api/balance')
    .then(response => response.json())
    .then(data => {
        an.set(data.balance);
    });

Если сервер вернул:

{
    "balance": 15400.75
}

Поле автоматически обновится и отформатируется.

Изменение значения по событию

Обновление при выборе товара

productSelect.addEventListener('change', event => {
    const price = event.target.dataset.price;
    an.set(price);
});

Использование set() внутри калькуляторов

Расчёт общей суммы

const price = new AutoNumeric('#price');
const quantity = new AutoNumeric('#quantity');
const total = new AutoNumeric('#total');

function calculate() {
    const result =
        price.getNumber() *
        quantity.getNumber();

    total.set(result);
}

Работа с дробными числами

AutoNumeric корректно обрабатывает значения с плавающей точкой.

an.set(10.256);

Если задано:

decimalPlaces: 2

результат будет:

10,26

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

Ограничение диапазона

При использовании minimumValue и maximumValue метод set() учитывает эти ограничения.

const an = new AutoNumeric('#score', {
    minimumValue: '0',
    maximumValue: '100'
});

Попытка установить:

an.set(150);

может:

  • отклоняться;
  • корректироваться;
  • вызывать ошибку;
  • ограничиваться максимальным значением.

Поведение зависит от параметров конфигурации.

Программная очистка значения

Установка пустого значения

an.set('');

или:

an.clear();

Метод clear() специально предназначен для очистки поля.

Отличие set() от прямого изменения value

Неправильный подход:

input.value = 10000;

Проблемы такого подхода:

  • отсутствует форматирование;
  • внутреннее состояние AutoNumeric не обновляется;
  • возможна рассинхронизация данных;
  • методы get(), getNumber() и другие могут возвращать некорректные значения.

Правильный способ:

an.set(10000);

Обновление нескольких полей

Массовое изменение значений

const fields = AutoNumeric.multiple([
    '#price',
    '#tax',
    '#discount'
], {
    decimalPlaces: 2
});

fields[0].set(1200);
fields[1].set(240);
fields[2].set(50);

Использование set() в циклах

const items = document.querySelectorAll('.money');

items.forEach((element, index) => {
    const an = AutoNumeric.getAutoNumericElement(element);

    an.set(index * 1000);
});

Обновление значения через таймер

let counter = 0;

setInterval(() => {
    counter += 100;

    an.set(counter);
}, 1000);

Подобный подход используется:

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

Установка значения при инициализации

Значение можно задать сразу во время создания экземпляра.

new AutoNumeric('#amount', 5000, {
    currencySymbol: '$ '
});

Это эквивалентно:

const an = new AutoNumeric('#amount', {
    currencySymbol: '$ '
});

an.set(5000);

Динамическое изменение после вычислений

const subtotal = 1200;
const tax = 240;
const shipping = 100;

const total = subtotal + tax + shipping;

an.set(total);

Работа с отрицательными значениями

an.set(-500);

При соответствующих настройках результат может выглядеть так:

-500,00

или:

(500,00)

если включён бухгалтерский формат отрицательных чисел.

Использование с React

useEffect(() => {
    if (autoNumericRef.current) {
        autoNumericRef.current.set(price);
    }
}, [price]);

Использование с Vue

watch(price, value => {
    an.set(value);
});

Использование с Angular

this.anElement.set(this.total);

Синхронизация нескольких полей

Автоматический пересчёт НДС

priceInput.addEventListener('input', () => {
    const price = priceAn.getNumber();
    const tax = price * 0.12;

    taxAn.set(tax);
});

Установка больших чисел

an.set(9876543210.99);

Результат:

9 876 543 210,99

Библиотека автоматически форматирует крупные значения.

Особенности работы с локалями

Настройки локали влияют на отображение значения после set().

Европейский формат

const an = new AutoNumeric('#sum', {
    digitGroupSeparator: ' ',
    decimalCharacter: ','
});

an.set(12345.67);

Результат:

12 345,67

Американский формат

const an = new AutoNumeric('#sum', {
    digitGroupSeparator: ',',
    decimalCharacter: '.'
});

an.set(12345.67);

Результат:

12,345.67

Метод setUnformatted()

Некоторые версии и конфигурации AutoNumeric поддерживают установку необработанного значения.

an.setUnformatted(1500.25);

Такой подход полезен при:

  • загрузке чисел из API;
  • работе с БД;
  • импорте CSV;
  • вычислениях без промежуточного форматирования.

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

При большом количестве операций set() может влиять на производительность интерфейса.

Проблемные сценарии:

  • обновление сотен полей;
  • частые таймеры;
  • realtime-графики;
  • потоковые данные.

Оптимизации:

requestAnimationFrame(() => {
    an.set(value);
});

или пакетное обновление:

values.forEach((value, index) => {
    instances[index].set(value);
});

События после программного изменения

В зависимости от настроек AutoNumeric программная установка значения может:

  • вызывать DOM-события;
  • не вызывать пользовательские события;
  • инициировать change;
  • инициировать input.

Это особенно важно при интеграции с фреймворками.

Проверка текущего значения после set()

an.set(5000);

console.log(an.getNumber());

Результат:

5000

Получение форматированного значения:

console.log(an.getFormatted());

Результат:

5 000,00

Практический пример финансовой формы

<input id="income">
<input id="expense">
<input id="profit">
const income = new AutoNumeric('#income');
const expense = new AutoNumeric('#expense');
const profit = new AutoNumeric('#profit');

function updateProfit() {
    const result =
        income.getNumber() -
        expense.getNumber();

    profit.set(result);
}

document.querySelector('#income')
    .addEventListener('input', updateProfit);

document.querySelector('#expense')
    .addEventListener('input', updateProfit);

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

Оглавление