Режим только для чтения

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

Инициализация режима только для чтения

Для перевода поля в режим только для чтения используется опция readOnly. Она может быть задана как при инициализации, так и динамически после создания объекта AutoNumeric.

Пример инициализации:

new AutoNumeric('#readonlyInput', 12345.67, {
    readOnly: true,
    currencySymbol: '$',
    digitGroupSeparator: ',',
    decimalCharacter: '.',
    decimalPlaces: 2
});

В этом примере:

  • readOnly: true делает поле недоступным для редактирования.
  • Число отображается в формате валюты с разделением тысяч и двумя десятичными знаками.
  • Пользователь может выделить и скопировать текст, но не изменять его.

Динамическое включение и отключение режима

AutoNumeric позволяет переключать режим только для чтения в уже существующем объекте с помощью методов:

const anElement = new AutoNumeric('#dynamicInput', 1000.5);

// Включение режима только для чтения
anElement.update({ readOnly: true });

// Отключение режима только для чтения
anElement.update({ readOnly: false });

Ключевые моменты:

  • Использование метода update позволяет менять параметры без пересоздания объекта.
  • В режиме readOnly можно безопасно форматировать число без риска, что пользователь случайно его изменит.

Влияние на взаимодействие с пользователем

В режиме только для чтения AutoNumeric изменяет следующие аспекты поведения поля:

  1. Блокировка ввода – пользователь не может вводить новые символы или редактировать существующие.
  2. Сохранение форматирования – значение продолжает отображаться в соответствии с установленными настройками, включая разделители тысяч, символы валюты и десятичные знаки.
  3. Выделение текста и копирование – несмотря на блокировку редактирования, пользователь может выделять и копировать текстовое значение.
  4. События – некоторые события, такие как onChange, не будут вызываться при попытке редактирования, так как изменения невозможны.

Примеры сочетания с другими опциями

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

Форматирование валюты с отрицательными значениями:

new AutoNumeric('#readonlyCurrency', -2543.89, {
    readOnly: true,
    currencySymbol: '€',
    decimalPlaces: 2,
    negativePositiveSignPlacement: 'p',
    digitGroupSeparator: ' '
});
  • Отрицательные значения отображаются с указанным стилем (p – перед числом).
  • Разделитель тысяч заменён на пробел для удобного визуального восприятия.

Процентные значения в режиме только для чтения:

new AutoNumeric('#readonlyPercent', 0.1534, {
    readOnly: true,
    suffixText: ' %',
    decimalPlaces: 2,
    minimumValue: '0',
    maximumValue: '100'
});
  • Число автоматически умножается на 100 и отображается с символом %.
  • Поле недоступно для редактирования, но полностью отображает процентное значение.

Особенности работы в таблицах и списках

Режим только для чтения особенно удобен при отображении числовых данных в таблицах и списках, где требуется единообразное форматирование:

  • Можно создавать коллекцию объектов AutoNumeric для всех ячеек таблицы.
  • Каждое значение будет корректно отформатировано и защищено от изменения.
  • С помощью метода getNumericString можно получить чистое числовое значение для дальнейшей обработки на стороне JavaScript.

Пример применения в таблице:

document.querySelectorAll('.readonly-cell').forEach(cell => {
    new AutoNumeric(cell, cell.textContent, { readOnly: true, decimalPlaces: 2 });
});
  • Автоматическое форматирование всех ячеек с классом .readonly-cell.
  • Значения отображаются красиво и единообразно, при этом остаются недоступными для редактирования.

Взаимодействие с API AutoNumeric

Даже в режиме только для чтения доступны методы API AutoNumeric:

  • getNumericString() – возвращает строку с числом без форматирования.
  • getNumber() – возвращает числовое значение.
  • set() – позволяет программно изменять значение без нарушения режима только для чтения, если параметр readOnly остаётся true.

Пример:

const anReadonly = new AutoNumeric('#readonlyValue', 5000, { readOnly: true });
console.log(anReadonly.getNumber()); // 5000
anReadonly.set(7500);
console.log(anReadonly.getNumber()); // 7500
  • Ввод пользователем остаётся заблокированным.
  • Программное обновление значения работает корректно и сохраняет форматирование.

Итоговые ключевые моменты режима только для чтения

  • readOnly: true блокирует пользовательский ввод, но сохраняет форматирование.
  • Динамическое включение и отключение через update обеспечивает гибкость.
  • Поле остаётся интерактивным для выделения и копирования.
  • Полностью совместимо с форматированием валют, процентов и чисел с разными разделителями.
  • Работает корректно в коллекциях элементов, таблицах и списках.
Оглавление