Установка через setAttribute

Метод setAttribute() используется для программного добавления HTML-атрибутов элементу. В контексте библиотеки AutoNumeric этот подход особенно полезен при динамическом создании полей ввода, генерации интерфейсов через Javascript, работе с шаблонами и интеграции с серверными фреймворками.

AutoNumeric поддерживает чтение конфигурации непосредственно из HTML-атрибутов элемента. Это позволяет задавать параметры форматирования без передачи большого объекта настроек в конструктор.

Базовый принцип работы

Метод setAttribute() добавляет или изменяет HTML-атрибут:

element.setAttribute(name, value);

Пример:

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

input.setAttribute('value', '1000');
input.setAttribute('placeholder', 'Введите сумму');

При использовании с AutoNumeric через атрибуты обычно задаются параметры форматирования:

input.setAttribute('data-digit-group-separator', ' ');
input.setAttribute('data-decimal-character', ',');
input.setAttribute('data-currency-symbol', '₸');

После этого инициализируется AutoNumeric:

new AutoNumeric(input);

Библиотека автоматически считывает атрибуты data-* и применяет соответствующие настройки.

Почему используется именно data-*

HTML5 ввёл специальный механизм пользовательских атрибутов:

data-*

Такие атрибуты:

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

AutoNumeric использует именно этот механизм.

Пример:

<input
    id="amount"
    data-decimal-character=","
    data-digit-group-separator=" "
>

Инициализация после установки атрибутов

Чаще всего атрибуты устанавливаются до создания экземпляра AutoNumeric.

Пример

const input = document.querySelector('#salary');

input.setAttribute('data-currency-symbol', '$');
input.setAttribute('data-decimal-character', '.');
input.setAttribute('data-digit-group-separator', ',');

new AutoNumeric(input);

Результат:

1,234,567.89 $

Динамическое создание поля

Одно из самых распространённых применений — создание input-элемента полностью через Javascript.

Полный пример

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

input.type = 'text';

input.setAttribute('data-currency-symbol', '€');
input.setAttribute('data-decimal-character', ',');
input.setAttribute('data-digit-group-separator', '.');

document.body.appendChild(input);

new AutoNumeric(input);

Такой подход используется:

  • в SPA-приложениях;
  • в React/Vue без прямой HTML-разметки;
  • в генераторах форм;
  • в административных панелях;
  • в конструкторах интерфейсов.

Установка диапазона значений

Через setAttribute() можно задавать ограничения.

Пример

input.setAttribute('data-minimum-value', '0');
input.setAttribute('data-maximum-value', '100000');

Инициализация:

new AutoNumeric(input);

Теперь поле не позволит выйти за указанный диапазон.

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

Фиксированное число знаков

input.setAttribute('data-decimal-places', '2');

Результат:

1234,50

Полное использование

const input = document.querySelector('#percent');

input.setAttribute('data-decimal-character', ',');
input.setAttribute('data-decimal-places', '4');

new AutoNumeric(input);

Формат:

15,1234

Добавление валютного символа

Символ справа

input.setAttribute('data-currency-symbol', ' ₽');

Символ слева

input.setAttribute('data-currency-symbol', '$');
input.setAttribute('data-currency-symbol-placement', 'p');

Результат:

$1,500.00

Символ справа

input.setAttribute('data-currency-symbol-placement', 's');

Результат:

1 500,00 ₽

Настройка разделителей

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

input.setAttribute('data-decimal-character', ',');
input.setAttribute('data-digit-group-separator', '.');

Результат:

1.234.567,89

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

input.setAttribute('data-decimal-character', '.');
input.setAttribute('data-digit-group-separator', ',');

Результат:

1,234,567.89

Отключение разделителя групп

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

input.setAttribute('data-digit-group-separator', '');

Результат:

1000000.25

Использование вместе с dataset

setAttribute() и dataset решают схожие задачи.

Через setAttribute

input.setAttribute('data-decimal-character', ',');

Через dataset

input.dataset.decimalCharacter = ',';

Оба варианта работают, но между ними есть различия.

Отличия setAttribute() и dataset

setAttribute()

Работает напрямую с HTML-атрибутами.

Плюсы:

  • универсальность;
  • поддержка любых атрибутов;
  • предсказуемость;
  • одинаковое поведение во всех браузерах.

Минусы:

  • менее удобный синтаксис.

dataset

Работает только с data-*.

Плюсы:

  • более компактный код;
  • удобный доступ;
  • автоматическое преобразование имён.

Минусы:

  • работает только с data-*;
  • некоторые разработчики избегают автоматического преобразования camelCase.

Пример комплексной настройки

const input = document.querySelector('#invoice');

input.setAttribute('data-currency-symbol', '₸');
input.setAttribute('data-currency-symbol-placement', 's');

input.setAttribute('data-decimal-character', ',');
input.setAttribute('data-digit-group-separator', ' ');

input.setAttribute('data-decimal-places', '2');

input.setAttribute('data-minimum-value', '0');
input.setAttribute('data-maximum-value', '100000000');

new AutoNumeric(input);

Результат форматирования:

12 500 000,00 ₸

Изменение атрибутов после инициализации

Важная особенность AutoNumeric: изменение data-* после создания экземпляра не всегда автоматически обновляет поведение поля.

Проблемный пример

const an = new AutoNumeric(input);

input.setAttribute('data-decimal-character', ',');

Форматирование может не измениться.

Причина:

  • AutoNumeric считывает настройки во время инициализации;
  • изменения HTML-атрибутов не всегда отслеживаются автоматически.

Правильный способ обновления настроек

Для изменения конфигурации после создания экземпляра рекомендуется использовать методы самой библиотеки.

Через update()

an.update({
    decimalCharacter: ','
});

Этот способ предпочтительнее, чем изменение data-* через DOM.

Когда setAttribute() особенно полезен

Генерация таблиц

rows.forEach(row => {
    const input = document.createElement('input');

    input.setAttribute('data-currency-symbol', '$');
    input.setAttribute('data-decimal-places', '2');

    new AutoNumeric(input);
});

Работа с шаблонами

template.content
    .querySelector('input')
    .setAttribute('data-digit-group-separator', ' ');

Серверная генерация HTML

Backend может формировать:

<input
    data-currency-symbol="₽"
    data-decimal-character=","
    data-decimal-places="2"
>

Frontend затем просто запускает:

new AutoNumeric.multiple('input');

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

В React прямое использование setAttribute() встречается реже, но возможно через ref.

Пример

import { useEffect, useRef } from 'react';

function PriceInput() {
    const inputRef = useRef(null);

    useEffect(() => {
        const input = inputRef.current;

        input.setAttribute('data-currency-symbol', '$');
        input.setAttribute('data-decimal-places', '2');

        new AutoNumeric(input);
    }, []);

    return <input ref={inputRef} />;
}

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

mounted() {
    this.$refs.price.setAttribute(
        'data-currency-symbol',
        '€'
    );

    new AutoNumeric(this.$refs.price);
}

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

Иногда интерфейс динамически добавляет поля в DOM. В таких случаях можно автоматически отслеживать появление новых элементов.

Пример

const observer = new MutationObserver(() => {
    document.querySelectorAll('.money').forEach(input => {

        if (!input.dataset.initialized) {

            input.setAttribute(
                'data-currency-symbol',
                '$'
            );

            new AutoNumeric(input);

            input.dataset.initialized = 'true';
        }
    });
});

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

Частые ошибки

Ошибка: установка атрибутов после инициализации

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

const an = new AutoNumeric(input);

input.setAttribute('data-decimal-character', ',');

Правильно:

input.setAttribute('data-decimal-character', ',');

const an = new AutoNumeric(input);

Ошибка: неправильные имена атрибутов

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

input.setAttribute('decimal-character', ',');

Правильно:

input.setAttribute('data-decimal-character', ',');

Ошибка: передача чисел вместо строк

HTML-атрибуты всегда строковые.

Лучше:

input.setAttribute('data-decimal-places', '2');

А не:

input.setAttribute('data-decimal-places', 2);

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

setAttribute() — относительно недорогая операция, однако при массовом создании элементов желательно:

  • сначала создать элемент;
  • установить все атрибуты;
  • только потом добавлять его в DOM;
  • после этого инициализировать AutoNumeric.

Эффективный подход

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

input.setAttribute('data-currency-symbol', '$');
input.setAttribute('data-decimal-places', '2');

container.appendChild(input);

new AutoNumeric(input);

Комбинирование с обычными HTML-атрибутами

setAttribute() может одновременно настраивать и AutoNumeric, и обычное поведение input.

Пример

input.setAttribute('type', 'text');
input.setAttribute('placeholder', 'Введите сумму');
input.setAttribute('autocomplete', 'off');

input.setAttribute('data-currency-symbol', '₽');
input.setAttribute('data-decimal-places', '2');

Полная динамическая конфигурация

function createMoneyInput(options) {

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

    input.setAttribute(
        'data-currency-symbol',
        options.symbol
    );

    input.setAttribute(
        'data-decimal-character',
        options.decimal
    );

    input.setAttribute(
        'data-digit-group-separator',
        options.separator
    );

    input.setAttribute(
        'data-decimal-places',
        options.precision
    );

    new AutoNumeric(input);

    return input;
}

const field = createMoneyInput({
    symbol: '$',
    decimal: '.',
    separator: ',',
    precision: '2'
});

document.body.appendChild(field);

Такой подход часто используется в:

  • финансовых системах;
  • CRM;
  • ERP;
  • административных интерфейсах;
  • банковских приложениях;
  • конструкторах форм;
  • SaaS-панелях управления.
Оглавление