Библиотека AutoNumeric может использоваться как в чистом JavaScript, так и в проектах, построенных на базе jQuery. Несмотря на то что современные версии AutoNumeric не зависят от jQuery, совместное использование остаётся распространённым сценарием в административных панелях, старых enterprise-приложениях, CRM-системах и формах с большим количеством динамических элементов.
Наиболее типичный вариант подключения:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>AutoNumeric + jQuery</title>
<script src="jquery.min.js"></script>
<script src="autoNumeric.min.js"></script>
</head>
<body>
<input type="text" class="price">
<script>
$(document).ready(function () {
new AutoNumeric('.price', {
digitGroupSeparator: ' ',
decimalCharacter: ',',
decimalPlaces: 2
});
});
</script>
</body>
</html>В данном примере jQuery используется исключительно как средство поиска DOM-элементов и управления жизненным циклом страницы.
Одно из ключевых преимуществ интеграции заключается в удобной работе с селекторами.
$(function () {
const element = $('.amount')[0];
new AutoNumeric(element, {
currencySymbol: '₸ ',
decimalPlaces: 0
});
});jQuery-объект не является DOM-элементом. AutoNumeric ожидает:
Поэтому при использовании jQuery часто применяется:
$('.amount')[0]или:
$('.amount').get(0)AutoNumeric умеет самостоятельно обрабатывать коллекции элементов.
<input class="money">
<input class="money">
<input class="money">new AutoNumeric('.money', {
digitGroupSeparator: ' ',
decimalCharacter: ','
});Однако в jQuery-проектах часто используется .each().
$('.money').each(function () {
new AutoNumeric(this, {
currencySymbol: '$ ',
decimalPlaces: 2
});
});Преимущества такого подхода:
В jQuery-приложениях элементы часто создаются после загрузки страницы:
$('#container').append(`
<input type="text" class="dynamic-price">
`);AutoNumeric не инициализирует такие элементы автоматически.
const input = $('#container .dynamic-price').last()[0];
new AutoNumeric(input, {
currencySymbol: '€ '
});Одно из самых распространённых применений — загрузка HTML-фрагментов через AJAX.
$.ajax({
url: '/form',
success: function (html) {
$('#content').html(html);
new AutoNumeric('.ajax-price', {
decimalPlaces: 2
});
}
});Ключевая особенность заключается в том, что инициализация должна происходить только после вставки HTML в DOM.
jQuery активно использует систему событий. AutoNumeric полностью совместим с ней.
$('.price').on('change', function () {
console.log($(this).val());
});Однако важно понимать различие между:
const anElement = AutoNumeric.getAutoNumericElement('.price');
$('.price').on('change', function () {
console.log(anElement.getNumericString());
});В jQuery-проектах часто применяется конфигурация через HTML.
<input
class="money"
data-currency="₽ "
data-decimals="2">$('.money').each(function () {
new AutoNumeric(this, {
currencySymbol: $(this).data('currency'),
decimalPlaces: $(this).data('decimals')
});
});Такой подход особенно полезен:
Иногда требуется доступ к экземпляру AutoNumeric позже.
$('.price').each(function () {
const an = new AutoNumeric(this);
$(this).data('autoNumeric', an);
});const an = $('.price').data('autoNumeric');
console.log(an.getNumber());Этот подход широко применяется в старых jQuery-архитектурах.
AutoNumeric хорошо работает с компонентами jQuery UI.
$('#dialog').dialog({
open: function () {
new AutoNumeric('.dialog-price', {
decimalPlaces: 2
});
}
});Инициализация выполняется внутри события open, поскольку
элементы диалога могут отсутствовать в DOM до открытия окна.
AutoNumeric часто интегрируется в пользовательские jQuery-плагины.
(function ($) {
$.fn.currencyField = function (options) {
return this.each(function () {
new AutoNumeric(this, {
currencySymbol: '₸ ',
decimalPlaces: 2,
...options
});
});
};
}(jQuery));Использование:
$('.salary').currencyField({
decimalPlaces: 0
});Такой подход помогает стандартизировать поведение полей во всём приложении.
$('form').find('.money').each(function () {
new AutoNumeric(this, {
digitGroupSeparator: ' ',
decimalCharacter: ','
});
});Основная проблема при отправке формы — сервер может получить форматированную строку вместо числа.
1 234 567,89 ₽1234567.89$('form').on('submit', function () {
$('.money').each(function () {
const an = AutoNumeric.getAutoNumericElement(this);
$(this).val(an.getNumericString());
});
});Перед отправкой поля преобразуются в чистые числа.
Если форма не перезагружает страницу, форматирование может быть потеряно.
$('form').on('ajax:success', function () {
new AutoNumeric('.money', {
decimalPlaces: 2
});
});jQuery поддерживает делегирование событий.
$(document).on('focus', '.money', function () {
if (!AutoNumeric.isManagedByAutoNumeric(this)) {
new AutoNumeric(this, {
decimalPlaces: 2
});
}
});Такой подход полезен при большом количестве динамических элементов.
Интеграция особенно популярна в финансовых таблицах.
<table>
<tr>
<td><input class="price"></td>
<td><input class="price"></td>
</tr>
</table>$('.price').each(function () {
new AutoNumeric(this, {
digitGroupSeparator: ' ',
decimalPlaces: 2
});
});$('.price').on('keyup', function () {
let total = 0;
$('.price').each(function () {
const an = AutoNumeric.getAutoNumericElement(this);
total += Number(an.getNumericString());
});
$('#total').text(total);
});AutoNumeric часто применяется совместно с DataTables.
$('#table').on('draw.dt', function () {
new AutoNumeric('.datatable-money', {
decimalPlaces: 2
});
});Поскольку DataTables пересоздаёт DOM-элементы, форматирование необходимо восстанавливать.
В проектах на Bootstrap и jQuery часто используются модальные окна.
$('#salaryModal').on('shown.bs.modal', function () {
new AutoNumeric('.modal-money', {
currencySymbol: '$ '
});
});При удалении DOM-элементов желательно уничтожать экземпляры AutoNumeric.
$('.money').each(function () {
const an = AutoNumeric.getAutoNumericElement(this);
an.remove();
});Это предотвращает:
В крупных jQuery-проектах нередко возникает повторная инициализация одного и того же поля.
if (!AutoNumeric.isManagedByAutoNumeric(element)) {
new AutoNumeric(element);
}const autoNumericObjects = [];
$('.money').each(function () {
autoNumericObjects.push(
new AutoNumeric(this)
);
});autoNumericObjects.forEach(an => {
an.update({
currencySymbol: '₽ '
});
});Во многих legacy-проектах применяется стиль:
var self = this;или:
var that = this;AutoNumeric не конфликтует с такими архитектурами.
$('.money').each(function () {
var $input = $(this);
var an = new AutoNumeric(this, {
decimalPlaces: 2
});
$input.on('blur', function () {
console.log(an.getFormatted());
});
});При большом количестве вычислений может потребоваться ограничение частоты обработки.
let timer;
$('.money').on('keyup', function () {
clearTimeout(timer);
timer = setTimeout(function () {
console.log('Обновление');
}, 300);
});Неправильно:
new AutoNumeric($('.price'));Правильно:
new AutoNumeric($('.price')[0]);Неправильно:
new AutoNumeric('.price');
new AutoNumeric('.price');Это приводит к ошибкам управления состоянием.
Неправильно:
$(this).val();Правильно:
an.getNumericString();Старые версии AutoNumeric имели более тесную интеграцию с jQuery и даже предоставляли jQuery-подобный API.
Современные версии:
function initMoneyFields(context = document) {
$(context).find('.money').each(function () {
if (!AutoNumeric.isManagedByAutoNumeric(this)) {
new AutoNumeric(this, {
decimalPlaces: 2
});
}
});
}initMoneyFields('#modal');Подобная архитектура особенно полезна:
const moneyConfig = {
digitGroupSeparator: ' ',
decimalCharacter: ',',
decimalPlaces: 2
};new AutoNumeric('.price', moneyConfig);
new AutoNumeric('.salary', moneyConfig);
new AutoNumeric('.total', moneyConfig);Это упрощает поддержку крупных jQuery-проектов и снижает вероятность расхождения настроек между различными компонентами интерфейса.