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

Библиотека AutoNumeric предназначена для форматирования числовых значений в HTML-элементах: полях ввода, div, span, таблицах и других контейнерах. При использовании vanilla JavaScript работа строится напрямую через DOM API браузера без промежуточных абстракций React, Vue или Angular.

Официальный сайт и документация: AutoNumeric

Наиболее распространённый способ подключения — через CDN.

<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.10.5"></script>

После подключения глобальный объект AutoNumeric становится доступным в браузере.

Базовая инициализация

Минимальный пример:

<input id="price">

<script>
    const priceInput = document.getElementById('price');

    const anElement = new AutoNumeric(priceInput, {
        currencySymbol: '₸ ',
        decimalCharacter: ',',
        digitGroupSeparator: ' '
    });
</script>

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

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

Инициализация через CSS-селекторы

AutoNumeric умеет работать сразу с несколькими элементами.

<input class="money">
<input class="money">
<input class="money">

<script>
    AutoNumeric.multiple('.money', {
        currencySymbol: '$ ',
        decimalPlaces: 2
    });
</script>

Метод multiple() создаёт отдельный экземпляр для каждого найденного элемента.

Инициализация после загрузки DOM

При работе с vanilla JavaScript важно учитывать момент доступности элементов.

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

document.addEventListener('DOMContentLoaded', () => {
    const amount = document.querySelector('#amount');

    new AutoNumeric(amount, {
        decimalPlaces: 2
    });
});

Без ожидания DOMContentLoaded скрипт может выполниться раньше создания DOM-узлов.

Работа с уже существующими значениями

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

<input id="salary" value="1500000">

<script>
    new AutoNumeric('#salary', {
        currencySymbol: '₽ ',
        digitGroupSeparator: ' '
    });
</script>

Результат:

₽ 1 500 000

Получение значения

Форматированное значение

const formatted = anElement.getFormatted();

console.log(formatted);

Пример результата:

₸ 12 500,00

Числовое значение

const numeric = anElement.getNumber();

console.log(numeric);

Результат:

12500

Строковое необработанное значение

const rawValue = anElement.getNumericString();

console.log(rawValue);

Результат:

12500.00

Такой формат особенно полезен при отправке данных на сервер.

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

Через API библиотеки

anElement.set(50000);

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

Через строку

anElement.set('1234567.89');

Через null

anElement.set(null);

Поле очищается.

Удаление форматирования

Иногда требуется получить значение без оформления.

const value = AutoNumeric.unformat('₸ 12 500,00', {
    currencySymbol: '₸ ',
    decimalCharacter: ',',
    digitGroupSeparator: ' '
});

console.log(value);

Результат:

12500

Форматирование без инициализации

Библиотека может использоваться как отдельный форматтер.

const result = AutoNumeric.format('1000000', {
    currencySymbol: '$ ',
    digitGroupSeparator: ','
});

console.log(result);

Результат:

$ 1,000,000

Использование data-атрибутов

Настройки можно хранить прямо в HTML.

<input
    id="tax"
    data-currency-symbol="% "
    data-decimal-places="2"
>
new AutoNumeric('#tax');

AutoNumeric автоматически читает data-* параметры.

Работа с событиями

Отслеживание изменения значения

const field = document.querySelector('#price');

field.addEventListener('autoNumeric:rawValueModified', (event) => {
    console.log(event.detail.newRawValue);
});

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

Стандартное событие input

field.addEventListener('input', () => {
    console.log(field.value);
});

Событие инициализации

field.addEventListener('autoNumeric:initialized', () => {
    console.log('Инициализация завершена');
});

Интеграция с HTML-формами

Отправка rawValue

Наиболее правильный способ — отправлять числовое значение без форматирования.

<form id="payment-form">
    <input id="amount">
    <button type="submit">Send</button>
</form>
const autoNumeric = new AutoNumeric('#amount', {
    currencySymbol: '$ '
});

document
    .getElementById('payment-form')
    .addEventListener('submit', (event) => {
        event.preventDefault();

        const rawValue = autoNumeric.getNumericString();

        console.log(rawValue);
    });

Автоматическая очистка форматирования перед submit

new AutoNumeric('#amount', {
    unformatOnSubmit: true
});

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

Работа с динамически создаваемыми элементами

В vanilla JavaScript элементы часто создаются через createElement.

const input = document.createElement('input');

document.body.appendChild(input);

new AutoNumeric(input, {
    currencySymbol: '€ '
});

Переинициализация элементов

Повторная инициализация одного и того же элемента вызывает ошибку.

Неправильно:

new AutoNumeric('#price');
new AutoNumeric('#price');

Правильно:

if (!AutoNumeric.isManagedByAutoNumeric('#price')) {
    new AutoNumeric('#price');
}

Удаление экземпляра

anElement.remove();

После удаления поле перестаёт форматироваться.

Обновление конфигурации

Настройки можно менять динамически.

anElement.update({
    currencySymbol: '€ ',
    decimalPlaces: 3
});

Использование preset-настроек

AutoNumeric содержит готовые конфигурации локалей.

new AutoNumeric('#price', AutoNumeric.getPredefinedOptions().French);

Комбинирование настроек

new AutoNumeric('#amount', {
    ...AutoNumeric.getPredefinedOptions().NorthAmerican,
    currencySymbol: '$ '
});

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

new AutoNumeric('#quantity', {
    minimumValue: '0',
    maximumValue: '100'
});

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

new AutoNumeric('#weight', {
    decimalPlaces: 4
});

Запрет отрицательных значений

new AutoNumeric('#age', {
    minimumValue: '0'
});

Форматирование процентов

new AutoNumeric('#discount', {
    suffixText: ' %',
    decimalPlaces: 1
});

Работа с целыми числами

new AutoNumeric('#users', {
    decimalPlaces: 0
});

Управление поведением колесика мыши

По умолчанию колесо мыши может изменять значение.

Отключение:

new AutoNumeric('#amount', {
    modifyValueOnWheel: false
});

Работа с клавишами стрелок

new AutoNumeric('#counter', {
    modifyValueOnUpDownArrow: true,
    upDownStep: '10'
});

Локализация

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

new AutoNumeric('#euro', {
    digitGroupSeparator: '.',
    decimalCharacter: ','
});

Результат:

1.234.567,89

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

new AutoNumeric('#usd', {
    digitGroupSeparator: ',',
    decimalCharacter: '.'
});

Результат:

1,234,567.89

Работа с div и span

AutoNumeric может форматировать не только input.

<div id="stat">5000000</div>
new AutoNumeric('#stat', {
    currencySymbol: '$ '
});

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

<div id="editor" contenteditable="true"></div>
new AutoNumeric('#editor', {
    decimalPlaces: 2
});

Проверка состояния экземпляра

console.log(anElement.isPristine());

Метод показывает, изменялось ли значение после инициализации.

Получение DOM-элемента

const domElement = anElement.node();

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

const price = new AutoNumeric('#price');
const tax = new AutoNumeric('#tax');

document.querySelector('#price').addEventListener('input', () => {
    const value = price.getNumber();

    tax.set(value * 0.12);
});

Работа с таблицами

<table>
    <tr>
        <td><input class="money"></td>
    </tr>
    <tr>
        <td><input class="money"></td>
    </tr>
</table>
AutoNumeric.multiple('.money', {
    currencySymbol: '$ '
});

Массовое обновление настроек

const elements = AutoNumeric.multiple('.prices', {
    currencySymbol: '$ '
});

elements.forEach(instance => {
    instance.update({
        decimalPlaces: 4
    });
});

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

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

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
            if (node.matches && node.matches('.money')) {
                new AutoNumeric(node, {
                    currencySymbol: '$ '
                });
            }
        });
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});

Уничтожение observer и экземпляров

observer.disconnect();

anElement.remove();

Хранение экземпляров

В больших приложениях удобно хранить ссылки на экземпляры.

const autoNumericMap = new Map();

document.querySelectorAll('.money').forEach((element) => {
    const instance = new AutoNumeric(element);

    autoNumericMap.set(element.id, instance);
});

Работа с dataset

<input
    class="currency"
    data-symbol="₸ "
>
document.querySelectorAll('.currency').forEach((element) => {
    new AutoNumeric(element, {
        currencySymbol: element.dataset.symbol
    });
});

Использование модульного подключения

При работе без фреймворков, но с bundler-системами:

import AutoNumeric from 'autonumeric';

const an = new AutoNumeric('#amount');

Подключение через npm

Установка:

npm install autonumeric

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

import AutoNumeric from 'autonumeric';

window.addEventListener('DOMContentLoaded', () => {
    new AutoNumeric('#price', {
        currencySymbol: '$ '
    });
});

Работа с defer

При подключении через <script defer> ожидание DOMContentLoaded часто не требуется.

<script defer src="app.js"></script>

Типичные ошибки

Повторная инициализация

new AutoNumeric('#field');
new AutoNumeric('#field');

Вызывает конфликт экземпляров.

Изменение value напрямую

Неправильно:

input.value = '5000';

Правильно:

anElement.set(5000);

Получение значения через value

console.log(input.value);

Вернёт форматированную строку, а не число.

Для получения rawValue используется:

anElement.getNumericString();

Производительность

При большом количестве элементов рекомендуется:

  • инициализировать только видимые поля;
  • удалять экземпляры при уничтожении DOM;
  • избегать постоянных вызовов update();
  • использовать multiple() вместо ручных циклов;
  • минимизировать количество обработчиков событий.

Архитектурный подход для vanilla JavaScript

В крупных проектах часто используется отдельный модуль-инициализатор.

export function initMoneyFields() {
    return AutoNumeric.multiple('.money', {
        currencySymbol: '$ ',
        decimalPlaces: 2
    });
}

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

import { initMoneyFields } from './money.js';

document.addEventListener('DOMContentLoaded', () => {
    initMoneyFields();
});

Такой подход упрощает:

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