Числовой режим на мобильных устройствах

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

Настройка типа клавиатуры

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

new AutoNumeric('#inputNumber', {
    inputMode: 'numeric'
});

Доступные значения:

  • numeric — стандартная цифровая клавиатура с числами и десятичной точкой.
  • decimal — клавиатура, ориентированная на ввод десятичных значений.
  • tel — альтернативная цифровая клавиатура, которая иногда удобнее для быстрых числовых вводов.
  • text — отключение специализированного числового режима, используется для обычного текстового ввода.

Использование корректного типа клавиатуры обеспечивает правильное поведение на iOS и Android, снижает риск появления лишних символов и повышает удобство работы с формами.

Контроль формата ввода

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

  • decimalPlaces — количество десятичных знаков.
  • digitGroupSeparator — разделитель тысяч.
  • decimalCharacter — символ десятичной части (точка или запятая в зависимости от локали).
  • minimumValue и maximumValue — допустимый диапазон чисел.

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

new AutoNumeric('#inputNumber', {
    decimalPlaces: 2,
    digitGroupSeparator: ',',
    decimalCharacter: '.',
    minimumValue: '0',
    maximumValue: '10000',
    inputMode: 'decimal'
});

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

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

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

  • Выделение всего содержимого (selectOnFocus) — при активации курсор выделяет все число, упрощая замену значения.
  • Отображение форматированного значения — при потере фокуса число автоматически форматируется с разделителями тысяч и фиксированным количеством знаков после запятой.
  • Временный неформатированный ввод — при фокусе поле может отображать значение без форматирования для упрощения редактирования.

Пример:

new AutoNumeric('#inputNumber', {
    selectOnFocus: true,
    modifyValueOnWheel: false
});

Особенности ввода отрицательных чисел

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

  • allowNegative — включение или запрет отрицательных значений.
  • negativeSignCharacter — символ отрицательного числа.
  • negativeBracketsTypeOnBlur — отображение отрицательных чисел в скобках при потере фокуса.
new AutoNumeric('#inputNumber', {
    allowNegative: true,
    negativeSignCharacter: '-',
    negativeBracketsTypeOnBlur: '()'
});

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

Оптимизация для малых экранов

Для мобильных устройств важна экономия пространства и предотвращение сдвигов интерфейса при активации клавиатуры. AutoNumeric предоставляет следующие подходы:

  • Ограничение длины числа через maximumValue и minimumValue.
  • Сокращённое отображение разрядов с помощью параметров decimalPlaces и digitGroupSeparator.
  • Поддержка сенсорных событий — отключение нежелательного изменения значения при случайных свайпах (modifyValueOnWheel: false).

Локализация числового ввода

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

  • digitGroupSeparator — символ группировки разрядов.
  • decimalCharacter — символ десятичного разделителя.
  • currencySymbol — для отображения валютных значений.
new AutoNumeric('#inputNumber', {
    decimalCharacter: ',',
    digitGroupSeparator: '.',
    currencySymbol: '€',
    currencySymbolPlacement: 'p'
});

Это обеспечивает соответствие региональным стандартам и упрощает ввод для пользователей на мобильных устройствах.

Интерактивные проверки ввода

AutoNumeric поддерживает автоматическое ограничение вводимых значений и их валидацию в реальном времени. На мобильных устройствах это критично, поскольку ошибки ввода труднее исправлять. Параметры minimumValue, maximumValue и onInvalidPaste позволяют:

  • Запрещать вставку недопустимых символов.
  • Автоматически корректировать вводимые данные.
  • Отслеживать события изменения значения и реагировать на них динамически.
new AutoNumeric('#inputNumber', {
    minimumValue: '0',
    maximumValue: '1000',
    onInvalidPaste: 'ignore'
});

Поддержка сенсорных событий и прокрутки

Для удобства работы с мобильными устройствами AutoNumeric позволяет контролировать изменение значений через свайпы и колесо мыши. На маленьких сенсорных экранах рекомендуется отключать изменение значения колесом или случайными жестами:

new AutoNumeric('#inputNumber', {
    modifyValueOnWheel: false
});

Это предотвращает непреднамеренные изменения чисел при прокрутке страницы или взаимодействии с элементами формы.

Оглавление