Суффиксы и префиксы

Префикс в AutoNumeric представляет собой строку, которая отображается перед числовым значением, не влияя на его внутреннее числовое представление. Он используется исключительно для визуального форматирования и может применяться для обозначения валют, единиц измерения или любых других смысловых маркеров.

Основная настройка, отвечающая за префикс, — currencySymbol (в более новых конфигурациях AutoNumeric также встречаются варианты через prefixText, в зависимости от режима и версии).

Пример базовой инициализации с префиксом валюты:

new AutoNumeric('#price', {
    currencySymbol: '$',
    currencySymbolPlacement: 'p' // p = prefix, s = suffix
});

В этом случае любое введённое число будет отображаться как:

$ 1,234.56

При этом внутреннее значение остаётся чисто числовым:

1234.56

Особенности поведения префикса

Префикс не участвует в арифметике и полностью исключается при извлечении значения через API:

const anElement = AutoNumeric.getAutoNumericElement('#price');

anElement.set(5000);

console.log(anElement.getNumber()); // 5000
console.log(anElement.getFormatted()); // $ 5,000.00

Префикс фиксируется слева от числа и не перемещается при редактировании. При вводе курсор автоматически ограничивается числовой частью поля, предотвращая редактирование самого символа префикса.

Суффиксы в AutoNumeric

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

Настройка суффикса также осуществляется через currencySymbolPlacement, где значение s определяет позицию справа.

Пример:

new AutoNumeric('#weight', {
    currencySymbol: 'kg',
    currencySymbolPlacement: 's'
});

Результат отображения:

1,250.00 kg

Поведение суффикса при вводе

Суффикс не блокирует ввод, но визуально фиксируется в конце строки. При изменении значения он остаётся неизменным:

anElement.set(42);

console.log(anElement.getFormatted()); // 42.00 kg

Суффиксы часто применяются для:

  • единиц массы (kg, g)
  • длины (m, cm)
  • скорости (km/h)
  • температуры (°C, °F)
  • процентов (%)

Комбинация префикса и формата числа

AutoNumeric позволяет комбинировать префиксы/суффиксы с любыми правилами форматирования: разделителями тысяч, количеством знаков после запятой, отрицательными форматами.

Пример комплексной конфигурации:

new AutoNumeric('#salary', {
    currencySymbol: '€',
    currencySymbolPlacement: 'p',
    decimalCharacter: ',',
    digitGroupSeparator: '.',
    decimalPlaces: 2
});

Отображение:

€ 12.345,67

При этом логика остаётся неизменной: символы не входят в числовое значение.

Динамическое изменение префикса и суффикса

AutoNumeric поддерживает изменение символов во время работы без переинициализации экземпляра.

const anElement = AutoNumeric.getAutoNumericElement('#input');

anElement.update({
    currencySymbol: 'USD',
    currencySymbolPlacement: 'p'
});

После обновления:

USD 1,000.00

Это особенно полезно при переключении валют или единиц измерения в интерфейсе.

Влияние на ввод и курсор

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

Особенности поведения:

  • курсор не может попасть в область префикса или суффикса
  • удаление символов не затрагивает форматирующие элементы
  • вставка текста автоматически очищается от лишних символов
  • при фокусе поле остаётся форматированным

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

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

Пример:

new AutoNumeric('#balance', {
    currencySymbol: '$',
    currencySymbolPlacement: 'p'
});

anElement.set(-250);

Возможное отображение:

$ -250.00

В зависимости от настроек отрицательного формата (например, negativePositiveSignPlacement) знак может располагаться перед символом валюты или после него.

Префиксы и суффиксы в режиме пустого значения

Если поле очищается, AutoNumeric может сохранять или скрывать префикс/суффикс в зависимости от конфигурации.

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

  • emptyInputBehavior
  • showOnlyNumbersOnFocus

Пример сценария:

new AutoNumeric('#field', {
    currencySymbol: '%',
    currencySymbolPlacement: 's',
    emptyInputBehavior: 'null'
});

При очистке поле может отображаться пустым, но суффикс не мешает восстановлению значения при вводе.

Использование в вычислениях и API

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

anElement.set('1000');

anElement.getNumber();     // 1000
anElement.getNumericString(); // "1000"
anElement.getFormatted();  // зависит от настроек, например "$ 1,000.00"

Это гарантирует отсутствие необходимости ручной очистки строк перед математическими операциями.

Особенности кастомных символов

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

new AutoNumeric('#distance', {
    currencySymbol: 'km',
    currencySymbolPlacement: 's'
});

или

new AutoNumeric('#custom', {
    currencySymbol: '≈ ',
    currencySymbolPlacement: 'p'
});

При использовании сложных строк важно учитывать пробелы и визуальную плотность интерфейса, поскольку AutoNumeric не интерпретирует символы как семантические единицы.

Взаимодействие с форматированием дробной части

Префиксы и суффиксы работают независимо от настроек дробной части:

new AutoNumeric('#precision', {
    currencySymbol: '€',
    currencySymbolPlacement: 'p',
    decimalPlaces: 4
});

Отображение:

€ 10.1234

Изменение точности не влияет на позицию и поведение символа.

Поведение при вставке значений из буфера

При вставке AutoNumeric очищает входные данные от лишних символов, но сохраняет корректное форматирование.

Пример:

$1,234.56kg → 1234.56

Если включены префикс и суффикс, они восстанавливаются автоматически после парсинга вставленного значения.

Ограничения и нюансы реализации

Использование префиксов и суффиксов накладывает ряд поведенческих ограничений:

  • нельзя редактировать символы напрямую через поле ввода
  • визуальные элементы не являются частью DOM-значения input
  • копирование текста может включать или исключать символы в зависимости от настроек outputFormat
  • сложные многочастные суффиксы (например, комбинированные единицы m/s²) требуют аккуратной настройки отображения

Режимы отображения и влияние на символы

Некоторые режимы AutoNumeric изменяют способ отображения префиксов и суффиксов:

  • форматированный вывод всегда включает символы
  • числовой вывод всегда их исключает
  • событийные значения (onFocus, onBlur) могут временно скрывать символы для удобства ввода

Пример:

new AutoNumeric('#field', {
    currencySymbol: '$',
    currencySymbolPlacement: 'p',
    showOnlyNumbersOnFocus: true
});

При фокусе:

1000.00

При потере фокуса:

$ 1,000.00
Оглавление