Библиотека AutoNumeric опирается на принцип отделения логики форматирования чисел от визуального представления. Это позволяет полностью контролировать внешний вид поля ввода через CSS и программные хуки, не вмешиваясь в алгоритмы парсинга и форматирования. Кастомизация стилей охватывает как стандартные состояния input-элемента, так и динамические состояния, возникающие во время ввода, валидации и потери/получения фокуса.
Основная идея стилизации заключается в том, что AutoNumeric не заменяет DOM-структуру и не создаёт сложную обёртку вокруг элемента. Управление визуальным состоянием осуществляется через классы, атрибуты и события, что делает интеграцию с CSS-фреймворками предсказуемой.
При инициализации AutoNumeric сохраняет стандартную структуру
HTML-элемента <input> и добавляет поведенческие
изменения, не нарушая работу CSS. Это означает, что базовые стили
применяются так же, как к обычному полю ввода.
Ключевые состояния, которые учитываются при стилизации:
Пример базовой стилизации:
input.autonumeric {
font-family: monospace;
font-size: 14px;
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 4px;
}AutoNumeric не накладывает ограничений на naming classes, что позволяет использовать любые соглашения: BEM, utility-first или atomic CSS.
Состояние фокуса играет ключевую роль, так как AutoNumeric временно изменяет представление значения при редактировании (например, убирает разделители тысяч или изменяет формат отображения в зависимости от конфигурации).
Фокус управляется стандартным псевдоклассом:
input.autonumeric:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
outline: none;
}В ряде сценариев используется дополнительная логика через события
focusin и focusout, позволяющая динамически
добавлять классы:
const element = document.querySelector('#price');
element.addEventListener('focusin', () => {
element.classList.add('is-focused');
});
element.addEventListener('focusout', () => {
element.classList.remove('is-focused');
});CSS:
input.autonumeric.is-focused {
background-color: #f9fafb;
}Такой подход особенно важен при интеграции с UI-системами, где визуальное состояние должно синхронизироваться с бизнес-логикой.
AutoNumeric поддерживает форматирование чисел с учётом знака, что позволяет применять стили в зависимости от значения. Хотя библиотека не навязывает встроенные классы для знаков, динамическая стилизация реализуется через обработку событий изменения значения.
Основное событие — autoNumeric:formatted или обработка
через API getNumber().
Пример динамического добавления классов:
const element = document.querySelector('#balance');
function updateSignClass() {
const value = AutoNumeric.getNumber(element);
element.classList.remove('is-positive', 'is-negative', 'is-zero');
if (value > 0) {
element.classList.add('is-positive');
} else if (value < 0) {
element.classList.add('is-negative');
} else {
element.classList.add('is-zero');
}
}
element.addEventListener('autoNumeric:formatted', updateSignClass);
element.addEventListener('autoNumeric:rawValueModified', updateSignClass);CSS-слои:
input.is-positive {
color: #16a34a;
}
input.is-negative {
color: #dc2626;
}
input.is-zero {
color: #6b7280;
}Такой подход отделяет визуальную интерпретацию данных от самой логики форматирования.
AutoNumeric выполняет строгую валидацию вводимых символов, но внешняя бизнес-логика часто требует расширенной обработки ошибок (например, диапазоны значений, финансовые ограничения, лимиты).
Распространённая практика — использование кастомных классов ошибок:
function validateRange(element, min, max) {
const value = AutoNumeric.getNumber(element);
if (value < min || value > max) {
element.classList.add('is-error');
} else {
element.classList.remove('is-error');
}
}CSS:
input.is-error {
border-color: #ef4444;
background-color: #fef2f2;
}Дополнительно можно использовать псевдостилизацию через атрибуты:
element.setAttribute('data-valid', 'false');input[data-valid="false"] {
outline: 2px solid #ef4444;
}Такой подход хорошо сочетается с реактивными фреймворками, где состояние ошибки часто хранится отдельно от DOM.
Одной из особенностей AutoNumeric является автоматическое добавление разделителей тысяч, символов валюты и префиксов/суффиксов. Это влияет на визуальную плотность текста и требует аккуратной настройки CSS.
Ключевые параметры:
letter-spacing для читаемости длинных чиселtext-align для выравниванияfont-variant-numeric для табличных цифрПример:
input.autonumeric {
text-align: right;
font-variant-numeric: tabular-nums;
letter-spacing: 0.3px;
}Использование табличных цифр особенно важно при отображении финансовых данных, так как предотвращает визуальные «скачки» ширины символов при изменении значения.
AutoNumeric не привязан к конкретной дизайн-системе, что позволяет легко интегрировать его в существующие темы. Основной подход — использование CSS-переменных:
:root {
--input-border: #d1d5db;
--input-focus: #2563eb;
--input-error: #dc2626;
--input-bg: #ffffff;
}Применение:
input.autonumeric {
border: 1px solid var(--input-border);
background-color: var(--input-bg);
}
input.autonumeric:focus {
border-color: var(--input-focus);
}Преимущество такого подхода заключается в централизованном управлении визуальным стилем без необходимости модификации JavaScript-логики.
В сложных интерфейсах часто используется переключение между светлой и тёмной темой. AutoNumeric-элементы автоматически наследуют стили, если не переопределять их явно.
Пример:
.theme-dark input.autonumeric {
--input-border: #374151;
--input-bg: #111827;
color: #f9fafb;
}Дополнительная адаптация состояния фокуса:
.theme-dark input.autonumeric:focus {
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}Использование data-атрибутов позволяет отделить состояние компонента от CSS-классов, что особенно удобно при большом количестве динамических состояний.
Пример состояния загрузки:
element.setAttribute('data-loading', 'true');input[data-loading="true"] {
opacity: 0.6;
pointer-events: none;
}Состояние блокировки:
input[data-disabled="true"] {
background-color: #f3f4f6;
cursor: not-allowed;
}Такой подход снижает зависимость от JavaScript-манипуляций классами и упрощает масштабирование стилей.
AutoNumeric может автоматически изменять отображение значения при вводе: добавлять разделители, округлять дробные части, изменять формат валюты. Это создаёт необходимость учитывать переходные состояния.
Распространённый паттерн — временное выделение изменений:
element.addEventListener('autoNumeric:formatted', () => {
element.classList.add('flash-update');
setTimeout(() => {
element.classList.remove('flash-update');
}, 150);
});CSS:
input.flash-update {
background-color: #ecfeff;
transition: background-color 0.2s ease;
}При использовании Tailwind, Bootstrap или аналогичных систем AutoNumeric выступает как слой логики форматирования, не конфликтующий с утилитарными классами.
Пример с утилитарными классами:
<input class="autonumeric w-full text-right border rounded px-3 py-2" />AutoNumeric не переопределяет стили, если они явно заданы, что позволяет использовать гибридный подход: логика библиотеки + атомарные стили фреймворка.
При использовании валютных символов или единиц измерения важно учитывать визуальное разделение текста.
Пример:
new AutoNumeric('#price', {
currencySymbol: '$',
currencySymbolPlacement: 'p'
});CSS-адаптация:
input.autonumeric {
font-family: system-ui, sans-serif;
}В некоторых интерфейсах дополнительно применяется визуальное «разделение смысла» через моноширинный шрифт для чисел и пропорциональный для символов, но это требует внешней обёртки, так как AutoNumeric работает непосредственно с input.
Событийная модель позволяет полностью синхронизировать стили с жизненным циклом значения.
Основные события:
autoNumeric:initializedautoNumeric:formattedautoNumeric:rawValueModifiedautoNumeric:invalidValueПример реактивной стилизации:
element.addEventListener('autoNumeric:invalidValue', () => {
element.classList.add('is-error');
});Такой механизм обеспечивает стабильную синхронизацию визуального состояния с внутренним состоянием данных без необходимости периодического опроса значения.